@pingux/astro 2.19.0-alpha.1 → 2.19.0-alpha.2

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

@@ -207,13 +207,13 @@ export declare const text: {
         wordBreak: string;
     };
     listViewItemSubtext: {
+        textOverflow: string;
+        overflow: string;
+        whiteSpace: string;
         alignSelf: string;
         fontSize: string;
         lineHeight: string;
         my: string;
-        textOverflow: string;
-        overflow: string;
-        whiteSpace: string;
         color: string;
         fontFamily: string;
         fontWeight: number;
@@ -224,11 +224,11 @@ export declare const text: {
         wordBreak: string;
     };
     listViewItemText: {
-        alignSelf: string;
-        fontSize: string;
         textOverflow: string;
         overflow: string;
         whiteSpace: string;
+        alignSelf: string;
+        fontSize: string;
         color: string;
         fontFamily: string;
         fontWeight: number;
@@ -243,6 +243,32 @@ export declare const text: {
         color: string;
         fontFamily: string;
     };
+    panelHeaderSubtext: {
+        alignSelf: string;
+        fontSize: string;
+        lineHeight: string;
+        my: string;
+        color: string;
+        fontFamily: string;
+        fontWeight: number;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+    };
+    panelHeaderText: {
+        alignSelf: string;
+        fontSize: string;
+        color: string;
+        fontFamily: string;
+        fontWeight: number;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+    };
     sectionTitle: {
         fontSize: string;
         fontWeight: number;

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

@@ -89,11 +89,11 @@ var textEllipsis = {
   overflow: 'hidden',
   whiteSpace: 'nowrap'
 };
-var listViewItemText = _objectSpread(_objectSpread(_objectSpread({}, bodyStrong), textEllipsis), {}, {
+var listViewItemText = _objectSpread(_objectSpread({}, bodyStrong), {}, {
   alignSelf: 'start',
   fontSize: 'md'
 });
-var listViewItemSubtext = _objectSpread(_objectSpread(_objectSpread({}, subtitle), textEllipsis), {}, {
+var listViewItemSubtext = _objectSpread(_objectSpread({}, subtitle), {}, {
   alignSelf: 'start',
   fontSize: 'sm',
   lineHeight: '16px',
@@ -180,13 +180,15 @@ var text = {
     fontWeight: 0,
     color: 'text.secondary'
   }, textEllipsis),
-  listViewItemSubtext: listViewItemSubtext,
-  listViewItemText: listViewItemText,
+  listViewItemSubtext: _objectSpread(_objectSpread({}, listViewItemSubtext), textEllipsis),
+  listViewItemText: _objectSpread(_objectSpread({}, listViewItemText), textEllipsis),
   placeholder: {
     fontWeight: -1,
     color: 'text.secondary',
     fontFamily: 'standard'
   },
+  panelHeaderSubtext: listViewItemSubtext,
+  panelHeaderText: listViewItemText,
   sectionTitle: sectionTitle,
   subtitle: subtitle,
   tabLabel: tabLabel,

package/lib/cjs/experimental/PanelHeader/PanelHeader.js

@@ -37,47 +37,47 @@ var PanelHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     data = _ref.data,
     others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var icon = data.icon,
+    image = data.image,
     subtext = data.subtext,
     text = data.text;
+  var getWrapperVariant = function getWrapperVariant() {
+    if (image && !icon) return 'panelHeader.imageWrapper';
+    return 'panelHeader.wrapper';
+  };
   var renderIcon = (0, _react2.jsx)(_index.Box, {
-    sx: {
-      width: 25,
-      color: 'accent.40'
-    }
+    width: "25px"
   }, icon && (0, _react2.jsx)(_index.Icon, {
+    color: "accent.40",
     icon: icon,
     size: "md",
     title: {
       name: (0, _concat["default"])(_context = "".concat(text)).call(_context, PANEL_HEADER_ICON)
     }
   }));
+  var renderImage = !icon && image && (0, _react2.jsx)(_index.Box, {
+    width: "35px"
+  }, (0, _react2.jsx)(_index.Image, {
+    src: image.src,
+    alt: image.alt,
+    "aria-label": image['aria-label']
+  }));
   var renderData = (0, _react2.jsx)(_index.Box, {
     isRow: true,
     variant: "panelHeader.data"
-  }, renderIcon, (0, _react2.jsx)(_index.Box, {
-    sx: {
-      ml: 'md'
-    }
+  }, icon ? renderIcon : renderImage, (0, _react2.jsx)(_index.Box, {
+    variant: getWrapperVariant()
   }, text && (0, _react2.jsx)(_index.Text, {
-    variant: "bodyStrong",
-    sx: {
-      alignSelf: 'start',
-      fontSize: 'md'
-    }
+    variant: "panelHeaderText"
   }, text), subtext && (0, _react2.jsx)(_index.Text, {
-    variant: "subtitle",
-    sx: {
-      fontSize: 'sm',
-      lineHeight: '16px',
-      my: '1px'
-    }
+    variant: "panelHeaderSubtext"
   }, subtext)));
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "panelHeader.container",
     className: className,
     ref: ref
   }, others), (0, _react2.jsx)(_index.Box, {
-    variant: "panelHeader.wrapper"
+    isRow: true,
+    variant: getWrapperVariant()
   }, renderData, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     variant: "panelHeader.controls"

package/lib/cjs/experimental/PanelHeader/PanelHeader.mdx

@@ -4,16 +4,23 @@ import { Meta } from '@storybook/addon-docs';
 
 # PanelHeader
 
-The PanelHeader component allows for easy creation of header items within a panel. It comes with pre-defined styles that match Ping specs. You can utilize the `data` prop to pass in text, subtext, and an mdi or svg icon.
+The PanelHeader component allows for easy creation of header items within a panel. It comes with pre-defined styles that match Ping specs. You can utilize the `data` prop to pass in text, subtext, image and an mdi or svg icon.
 
 ### Recommended Use
 This component is intended to be used as a header within a panel.
 
+#### Icons and Images
+Add an icon by passing an mdi or svg icon to the `data.icon` prop. Default size is 25px.
+
+Add an image by passing an object with a `src` key to the `data.image` prop. `alt` and `aria-label` keys are supported but not required. Default size is 35px.
+
+If both an icon and an image are provided the icon will be rendered.
+
 #### Children
 To add action controls, include control elements as `{children}`. All elements passed in this way will be right-justified and center-aligned. You can use the following pre-styled control components to easily match Ping specs:
-- [PanelHeaderEditButton](./?path=/story/experimental-panelheader-controls-panelheadereditbutton--default)
-- [PanelHeaderMenu](./?path=/story/experimental-panelheader-controls-panelheadermenu--default)
-- [PanelHeaderSwitchField](./?path=/story/experimental-panelheader-controls-panelheaderswitchfield--default)
+- [PanelHeaderCloseButton](./?path=/docs/experimental-panelheader-controls-panelheaderclosebutton--docs)
+- [PanelHeaderMenu](./?path=/docs/experimental-panelheader-controls-panelheadermenu--docs)
+- [PanelHeaderSwitchField](./?path=/docs/experimental-panelheader-controls-panelheaderswitchfield--docs)
 
 ### Note:
 Components styled to match design specs may be updated over time as design specs change. Be aware that styles within this component may undergo minor adjustments over time to stay in sync with the latest design specifications.

package/lib/cjs/experimental/PanelHeader/PanelHeader.stories.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithSubtext = exports.WithControls = exports.Default = void 0;
+exports["default"] = exports.WithSubtext = exports.WithImage = exports.WithExtraLongText = exports.WithControls = exports.Default = void 0;
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
@@ -13,6 +13,7 @@ var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _listViewItemAttributes = require("../../components/ListViewItem/listViewItemAttributes");
 var _index = require("../../index");
+var _images = require("../../utils/devUtils/constants/images");
 var _PanelHeader = _interopRequireDefault(require("./PanelHeader.mdx"));
 var _react2 = require("@emotion/react");
 var _default = {
@@ -68,4 +69,34 @@ var WithControls = function WithControls(_ref3) {
     key: "delete"
   }, "Delete user")), (0, _react2.jsx)(_index.PanelHeaderCloseButton, null));
 };
-exports.WithControls = WithControls;
+exports.WithControls = WithControls;
+var WithImage = function WithImage() {
+  return (0, _react2.jsx)(_index.PanelHeader, {
+    data: {
+      image: {
+        src: _images.pingImg,
+        alt: 'Ping Identity Logo',
+        'aria-label': 'Ping Identity Logo'
+      },
+      text: 'Fons Vernall'
+    }
+  });
+};
+exports.WithImage = WithImage;
+var WithExtraLongText = function WithExtraLongText(_ref4) {
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref4), _ref4));
+  return (0, _react2.jsx)(_index.PanelHeader, (0, _extends2["default"])({}, args, {
+    data: {
+      icon: _AccountIcon["default"],
+      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',
+      subtext: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum'
+    }
+  }), (0, _react2.jsx)(_index.PanelHeaderSwitchField, null), (0, _react2.jsx)(_index.PanelHeaderMenu, null, (0, _react2.jsx)(_index.Item, {
+    key: "enable"
+  }, "Enable user"), (0, _react2.jsx)(_index.Item, {
+    key: "disable"
+  }, "Disable user"), (0, _react2.jsx)(_index.Item, {
+    key: "delete"
+  }, "Delete user")), (0, _react2.jsx)(_index.PanelHeaderCloseButton, null));
+};
+exports.WithExtraLongText = WithExtraLongText;

package/lib/cjs/experimental/PanelHeader/PanelHeader.styles.js

@@ -7,32 +7,36 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var container = {
   bg: 'accent.99',
-  justifyContent: 'center',
-  minHeight: 60,
   borderBottom: '1px',
+  borderBottomColor: 'accent.90',
   borderBottomStyle: 'solid',
-  borderBottomColor: 'accent.90'
+  justifyContent: 'center',
+  minHeight: 60
 };
 var controls = {
-  alignSelf: 'center',
   alignItems: 'center',
+  alignSelf: 'center',
+  flexShrink: 0,
   gap: 'sm',
-  ml: 'auto'
+  ml: 'auto',
+  mr: 'md'
 };
 var data = {
-  alignItems: 'center',
-  display: 'grid !important',
-  gridTemplateColumns: 'max-content auto'
+  alignItems: 'center'
 };
 var wrapper = {
-  display: 'grid !important',
-  gridTemplateColumns: 'auto auto',
-  mx: 'md'
+  display: 'flex',
+  flex: '1 1 0px',
+  ml: 'md'
+};
+var imageWrapper = {
+  ml: 'sm'
 };
 var _default = {
   container: container,
   controls: controls,
   data: data,
+  imageWrapper: imageWrapper,
   wrapper: wrapper
 };
 exports["default"] = _default;

package/lib/cjs/experimental/PanelHeader/PanelHeader.test.js

@@ -1,26 +1,51 @@
 "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");
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon"));
+var _react2 = require("@testing-library/react");
 var _index = require("../../index");
+var _images = require("../../utils/devUtils/constants/images");
 var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _PanelHeader = require("./PanelHeader");
-var _react2 = require("@emotion/react");
+var _react3 = 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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var defaultProps = {
   data: {
     text: 'testText',
     subtext: 'testSubtext',
-    icon: _AccountIcon["default"]
+    icon: _AccountIcon["default"],
+    image: {
+      src: _images.pingImg,
+      alt: 'avatar',
+      'aria-label': 'avatar'
+    }
   }
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_index.PanelHeader, (0, _extends2["default"])({}, defaultProps, props)));
+  return (0, _testWrapper.render)((0, _react3.jsx)(_index.PanelHeader, (0, _extends2["default"])({}, defaultProps, props)));
 };
+var fallbackImageObj = null;
+jest.mock('../../hooks/useFallbackImage', function () {
+  return function (props) {
+    fallbackImageObj = _objectSpread({}, props);
+    return [];
+  };
+});
 
 // Need to be added to each test file to test accessibility using axe.
 (0, _testAxe["default"])(getComponent);
@@ -39,8 +64,27 @@ describe('PanelHeader', function () {
   });
   test('renders children', function () {
     getComponent({
-      children: (0, _react2.jsx)(_index.PanelHeaderSwitchField, null)
+      children: (0, _react3.jsx)(_index.PanelHeaderSwitchField, null)
     });
     _testWrapper.screen.getByRole('switch');
   });
+});
+test('renders icon if both icon and image are passed', function () {
+  getComponent();
+  var icon = _testWrapper.screen.getByRole('img');
+  expect(icon).not.toHaveAttribute('src', _images.pingImg);
+  expect(icon.tagName.toLowerCase()).toBe('svg');
+  expect(icon.tagName.toLowerCase()).not.toBe('img');
+});
+test('renders image', function () {
+  delete defaultProps.data.icon;
+  getComponent();
+  (0, _react2.act)(function () {
+    fallbackImageObj.onImageLoad();
+  });
+  var image = _testWrapper.screen.getByRole('img');
+  expect(image.tagName.toLowerCase()).toBe('img');
+  expect(image).toHaveAttribute('src', _images.pingImg);
+  expect(image).toHaveAttribute('alt', 'avatar');
+  expect(image).toHaveAttribute('aria-label', 'avatar');
 });

package/lib/cjs/experimental/PanelHeader/controls/PanelHeaderSwitchField.stories.js

@@ -17,7 +17,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _react = _interopRequireDefault(require("react"));
 var _switchFieldAttributes = require("../../../components/SwitchField/switchFieldAttributes");
 var _index = require("../../../index");
-var _hoverProps = require("../../../utils/docUtils/hoverProps");
 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; }
@@ -32,7 +31,7 @@ var _default = {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread({}, _switchFieldAttributes.switchFieldArgTypes), _hoverProps.onHoverArgTypes)
+  argTypes: _objectSpread({}, _switchFieldAttributes.switchFieldArgTypes)
 };
 exports["default"] = _default;
 var Default = function Default(args) {

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

@@ -80,11 +80,11 @@ var textEllipsis = {
   overflow: 'hidden',
   whiteSpace: 'nowrap'
 };
-var listViewItemText = _objectSpread(_objectSpread(_objectSpread({}, bodyStrong), textEllipsis), {}, {
+var listViewItemText = _objectSpread(_objectSpread({}, bodyStrong), {}, {
   alignSelf: 'start',
   fontSize: 'md'
 });
-var listViewItemSubtext = _objectSpread(_objectSpread(_objectSpread({}, subtitle), textEllipsis), {}, {
+var listViewItemSubtext = _objectSpread(_objectSpread({}, subtitle), {}, {
   alignSelf: 'start',
   fontSize: 'sm',
   lineHeight: '16px',
@@ -171,13 +171,15 @@ export var text = {
     fontWeight: 0,
     color: 'text.secondary'
   }, textEllipsis),
-  listViewItemSubtext: listViewItemSubtext,
-  listViewItemText: listViewItemText,
+  listViewItemSubtext: _objectSpread(_objectSpread({}, listViewItemSubtext), textEllipsis),
+  listViewItemText: _objectSpread(_objectSpread({}, listViewItemText), textEllipsis),
   placeholder: {
     fontWeight: -1,
     color: 'text.secondary',
     fontFamily: 'standard'
   },
+  panelHeaderSubtext: listViewItemSubtext,
+  panelHeaderText: listViewItemText,
   sectionTitle: sectionTitle,
   subtitle: subtitle,
   tabLabel: tabLabel,

package/lib/experimental/PanelHeader/PanelHeader.js

@@ -15,7 +15,7 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import React, { forwardRef } from 'react';
 import { SharedItemPropTypes } from '../../components/ListViewItem/listViewItemAttributes';
-import { Box, Icon, Text } from '../../index';
+import { Box, Icon, Image, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var PANEL_HEADER_ICON = '-panel-header-icon';
 var PanelHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -25,47 +25,47 @@ var PanelHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
     data = _ref.data,
     others = _objectWithoutProperties(_ref, _excluded);
   var icon = data.icon,
+    image = data.image,
     subtext = data.subtext,
     text = data.text;
+  var getWrapperVariant = function getWrapperVariant() {
+    if (image && !icon) return 'panelHeader.imageWrapper';
+    return 'panelHeader.wrapper';
+  };
   var renderIcon = ___EmotionJSX(Box, {
-    sx: {
-      width: 25,
-      color: 'accent.40'
-    }
+    width: "25px"
   }, icon && ___EmotionJSX(Icon, {
+    color: "accent.40",
     icon: icon,
     size: "md",
     title: {
       name: _concatInstanceProperty(_context = "".concat(text)).call(_context, PANEL_HEADER_ICON)
     }
   }));
+  var renderImage = !icon && image && ___EmotionJSX(Box, {
+    width: "35px"
+  }, ___EmotionJSX(Image, {
+    src: image.src,
+    alt: image.alt,
+    "aria-label": image['aria-label']
+  }));
   var renderData = ___EmotionJSX(Box, {
     isRow: true,
     variant: "panelHeader.data"
-  }, renderIcon, ___EmotionJSX(Box, {
-    sx: {
-      ml: 'md'
-    }
+  }, icon ? renderIcon : renderImage, ___EmotionJSX(Box, {
+    variant: getWrapperVariant()
   }, text && ___EmotionJSX(Text, {
-    variant: "bodyStrong",
-    sx: {
-      alignSelf: 'start',
-      fontSize: 'md'
-    }
+    variant: "panelHeaderText"
   }, text), subtext && ___EmotionJSX(Text, {
-    variant: "subtitle",
-    sx: {
-      fontSize: 'sm',
-      lineHeight: '16px',
-      my: '1px'
-    }
+    variant: "panelHeaderSubtext"
   }, subtext)));
   return ___EmotionJSX(Box, _extends({
     variant: "panelHeader.container",
     className: className,
     ref: ref
   }, others), ___EmotionJSX(Box, {
-    variant: "panelHeader.wrapper"
+    isRow: true,
+    variant: getWrapperVariant()
   }, renderData, ___EmotionJSX(Box, {
     isRow: true,
     variant: "panelHeader.controls"

package/lib/experimental/PanelHeader/PanelHeader.mdx

@@ -4,16 +4,23 @@ import { Meta } from '@storybook/addon-docs';
 
 # PanelHeader
 
-The PanelHeader component allows for easy creation of header items within a panel. It comes with pre-defined styles that match Ping specs. You can utilize the `data` prop to pass in text, subtext, and an mdi or svg icon.
+The PanelHeader component allows for easy creation of header items within a panel. It comes with pre-defined styles that match Ping specs. You can utilize the `data` prop to pass in text, subtext, image and an mdi or svg icon.
 
 ### Recommended Use
 This component is intended to be used as a header within a panel.
 
+#### Icons and Images
+Add an icon by passing an mdi or svg icon to the `data.icon` prop. Default size is 25px.
+
+Add an image by passing an object with a `src` key to the `data.image` prop. `alt` and `aria-label` keys are supported but not required. Default size is 35px.
+
+If both an icon and an image are provided the icon will be rendered.
+
 #### Children
 To add action controls, include control elements as `{children}`. All elements passed in this way will be right-justified and center-aligned. You can use the following pre-styled control components to easily match Ping specs:
-- [PanelHeaderEditButton](./?path=/story/experimental-panelheader-controls-panelheadereditbutton--default)
-- [PanelHeaderMenu](./?path=/story/experimental-panelheader-controls-panelheadermenu--default)
-- [PanelHeaderSwitchField](./?path=/story/experimental-panelheader-controls-panelheaderswitchfield--default)
+- [PanelHeaderCloseButton](./?path=/docs/experimental-panelheader-controls-panelheaderclosebutton--docs)
+- [PanelHeaderMenu](./?path=/docs/experimental-panelheader-controls-panelheadermenu--docs)
+- [PanelHeaderSwitchField](./?path=/docs/experimental-panelheader-controls-panelheaderswitchfield--docs)
 
 ### Note:
 Components styled to match design specs may be updated over time as design specs change. Be aware that styles within this component may undergo minor adjustments over time to stay in sync with the latest design specifications.

package/lib/experimental/PanelHeader/PanelHeader.stories.js

@@ -5,6 +5,7 @@ import AccountIcon from '@pingux/mdi-react/AccountIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { SharedItemArgTypes } from '../../components/ListViewItem/listViewItemAttributes';
 import { Item, PanelHeader, PanelHeaderCloseButton, PanelHeaderMenu, PanelHeaderSwitchField } from '../../index';
+import { pingImg } from '../../utils/devUtils/constants/images';
 import PanelHeaderReadMe from './PanelHeader.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -56,4 +57,32 @@ export var WithControls = function WithControls(_ref3) {
   }, "Disable user"), ___EmotionJSX(Item, {
     key: "delete"
   }, "Delete user")), ___EmotionJSX(PanelHeaderCloseButton, null));
+};
+export var WithImage = function WithImage() {
+  return ___EmotionJSX(PanelHeader, {
+    data: {
+      image: {
+        src: pingImg,
+        alt: 'Ping Identity Logo',
+        'aria-label': 'Ping Identity Logo'
+      },
+      text: 'Fons Vernall'
+    }
+  });
+};
+export var WithExtraLongText = function WithExtraLongText(_ref4) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
+  return ___EmotionJSX(PanelHeader, _extends({}, args, {
+    data: {
+      icon: AccountIcon,
+      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',
+      subtext: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum'
+    }
+  }), ___EmotionJSX(PanelHeaderSwitchField, null), ___EmotionJSX(PanelHeaderMenu, null, ___EmotionJSX(Item, {
+    key: "enable"
+  }, "Enable user"), ___EmotionJSX(Item, {
+    key: "disable"
+  }, "Disable user"), ___EmotionJSX(Item, {
+    key: "delete"
+  }, "Delete user")), ___EmotionJSX(PanelHeaderCloseButton, null));
 };

package/lib/experimental/PanelHeader/PanelHeader.styles.js

@@ -1,30 +1,34 @@
 var container = {
   bg: 'accent.99',
-  justifyContent: 'center',
-  minHeight: 60,
   borderBottom: '1px',
+  borderBottomColor: 'accent.90',
   borderBottomStyle: 'solid',
-  borderBottomColor: 'accent.90'
+  justifyContent: 'center',
+  minHeight: 60
 };
 var controls = {
-  alignSelf: 'center',
   alignItems: 'center',
+  alignSelf: 'center',
+  flexShrink: 0,
   gap: 'sm',
-  ml: 'auto'
+  ml: 'auto',
+  mr: 'md'
 };
 var data = {
-  alignItems: 'center',
-  display: 'grid !important',
-  gridTemplateColumns: 'max-content auto'
+  alignItems: 'center'
 };
 var wrapper = {
-  display: 'grid !important',
-  gridTemplateColumns: 'auto auto',
-  mx: 'md'
+  display: 'flex',
+  flex: '1 1 0px',
+  ml: 'md'
+};
+var imageWrapper = {
+  ml: 'sm'
 };
 export default {
   container: container,
   controls: controls,
   data: data,
+  imageWrapper: imageWrapper,
   wrapper: wrapper
 };

package/lib/experimental/PanelHeader/PanelHeader.test.js

@@ -1,8 +1,21 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React from 'react';
 import AccountIcon from '@pingux/mdi-react/AccountIcon';
+import { act } from '@testing-library/react';
 import { PanelHeader, PanelHeaderSwitchField } from '../../index';
+import { pingImg } from '../../utils/devUtils/constants/images';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import { PANEL_HEADER_ICON } from './PanelHeader';
@@ -11,13 +24,25 @@ var defaultProps = {
   data: {
     text: 'testText',
     subtext: 'testSubtext',
-    icon: AccountIcon
+    icon: AccountIcon,
+    image: {
+      src: pingImg,
+      alt: 'avatar',
+      'aria-label': 'avatar'
+    }
   }
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(PanelHeader, _extends({}, defaultProps, props)));
 };
+var fallbackImageObj = null;
+jest.mock('../../hooks/useFallbackImage', function () {
+  return function (props) {
+    fallbackImageObj = _objectSpread({}, props);
+    return [];
+  };
+});
 
 // Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent);
@@ -40,4 +65,23 @@ describe('PanelHeader', function () {
     });
     screen.getByRole('switch');
   });
+});
+test('renders icon if both icon and image are passed', function () {
+  getComponent();
+  var icon = screen.getByRole('img');
+  expect(icon).not.toHaveAttribute('src', pingImg);
+  expect(icon.tagName.toLowerCase()).toBe('svg');
+  expect(icon.tagName.toLowerCase()).not.toBe('img');
+});
+test('renders image', function () {
+  delete defaultProps.data.icon;
+  getComponent();
+  act(function () {
+    fallbackImageObj.onImageLoad();
+  });
+  var image = screen.getByRole('img');
+  expect(image.tagName.toLowerCase()).toBe('img');
+  expect(image).toHaveAttribute('src', pingImg);
+  expect(image).toHaveAttribute('alt', 'avatar');
+  expect(image).toHaveAttribute('aria-label', 'avatar');
 });

package/lib/experimental/PanelHeader/controls/PanelHeaderSwitchField.stories.js

@@ -12,7 +12,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import { switchFieldArgTypes } from '../../../components/SwitchField/switchFieldAttributes';
 import { PanelHeaderSwitchField } from '../../../index';
-import { onHoverArgTypes } from '../../../utils/docUtils/hoverProps';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 delete switchFieldArgTypes.label;
 export default {
@@ -25,7 +24,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread(_objectSpread({}, switchFieldArgTypes), onHoverArgTypes)
+  argTypes: _objectSpread({}, switchFieldArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(PanelHeaderSwitchField, args);

package/package.json

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