@pingux/astro 2.121.0-alpha.0 → 2.121.0-alpha.2

package/lib/components/Footer/Footer.test.js

@@ -0,0 +1,100 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Link } from '../..';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import Footer, { CopyrightText, FooterNav, FooterNavItem } from '.';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var legalLinks = [{
+  key: 'Legal',
+  text: 'Legal',
+  linkProps: {
+    href: 'https://www.pingidentity.com/en/legal.html',
+    'aria-label': 'Legal'
+  }
+}, {
+  key: 'Privacy',
+  text: 'Privacy',
+  linkProps: {
+    href: 'https://www.pingidentity.com/en-us/docs/legal/privacy',
+    'aria-label': 'Privacy'
+  }
+}, {
+  key: 'Security',
+  text: 'Security',
+  linkProps: {
+    href: 'https://www.pingidentity.com/en/company/security-at-ping-identity.html',
+    'aria-label': 'Security'
+  }
+}, {
+  key: 'SMS Campaigns',
+  text: 'SMS Campaigns',
+  linkProps: {
+    href: 'https://www.pingidentity.com/en/legal/pingmfa-campaign-terms-of-service.html',
+    'aria-label': 'SMS Campaigns'
+  }
+}];
+var testId = 'test-footer';
+var org = 'Ping Identity';
+var year = new Date().getFullYear();
+var defaultProps = {
+  'data-testid': testId
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(Footer, _extends({}, props, defaultProps), ___EmotionJSX(CopyrightText, {
+    linkProps: {
+      href: '#',
+      children: org
+    }
+  }), ___EmotionJSX(FooterNav, null, _mapInstanceProperty(legalLinks).call(legalLinks, function (link) {
+    return ___EmotionJSX(FooterNavItem, {
+      key: link.key
+    }, ___EmotionJSX(Link, _extends({
+      variant: "footerLink"
+    }, link.linkProps), link.text));
+  }))));
+};
+
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(Footer, props, ___EmotionJSX(CopyrightText, {
+      linkProps: {
+        href: '#',
+        children: org
+      }
+    }), ___EmotionJSX(FooterNav, null, _mapInstanceProperty(legalLinks).call(legalLinks, function (link) {
+      return ___EmotionJSX(FooterNavItem, {
+        key: link.key
+      }, ___EmotionJSX(Link, _extends({
+        variant: "footerLink"
+      }, link.linkProps), link.text));
+    })));
+  }
+});
+test('default Footer', function () {
+  getComponent();
+  var footer = screen.getByTestId(testId);
+  expect(footer).toBeInTheDocument();
+  expect(footer).toBeInstanceOf(HTMLElement);
+  expect(footer.tagName).toBe('FOOTER');
+});
+test('Footer have copyright text and year', function () {
+  getComponent();
+  var copyRightText = screen.getByText(org);
+  expect(copyRightText).toBeInstanceOf(HTMLAnchorElement);
+  expect(copyRightText).toHaveAttribute('href', '#');
+  var footer = screen.getByTestId(testId);
+  expect(footer).toHaveTextContent("".concat(year));
+});
+test('Footer have legal links', function () {
+  getComponent();
+  _forEachInstanceProperty(legalLinks).call(legalLinks, function (link) {
+    var legalLink = screen.getByText(link.text);
+    expect(legalLink).toBeInstanceOf(HTMLAnchorElement);
+    expect(legalLink).toHaveAttribute('href', link.linkProps.href);
+  });
+});

package/lib/components/Footer/FooterNav.js

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import React from 'react';
+import { Box } from '../..';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var FooterNav = function FooterNav(props) {
+  var children = props.children,
+    others = _objectWithoutProperties(props, _excluded);
+  return ___EmotionJSX(Box, _extends({
+    as: "ul",
+    isRow: true,
+    variant: "footer.footerNav"
+  }, others), children);
+};
+export default FooterNav;

package/lib/components/Footer/FooterNavItem.js

@@ -0,0 +1,14 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import React from 'react';
+import { Box } from '../..';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var FooterNavItem = function FooterNavItem(props) {
+  var children = props.children,
+    others = _objectWithoutProperties(props, _excluded);
+  return ___EmotionJSX(Box, _extends({
+    as: "li"
+  }, others), children);
+};
+export default FooterNavItem;

package/lib/components/Footer/index.js

@@ -0,0 +1,4 @@
+export { default as CopyrightText } from './CopyrightText';
+export { default } from './Footer';
+export { default as FooterNav } from './FooterNav';
+export { default as FooterNavItem } from './FooterNavItem';

package/lib/components/Footer/stories/FooterNextGenComponent.js

@@ -0,0 +1,117 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React from 'react';
+import { fab } from '@fortawesome/free-brands-svg-icons';
+import { far } from '@fortawesome/free-regular-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Box, CopyrightText, Footer, FooterNav, FooterNavItem, Image, Link } from '../../..';
+import { eAIcon } from '../../../utils/devUtils/constants/images';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var FooterNextGenComponent = function FooterNextGenComponent() {
+  var legalLinks = [{
+    key: 'Legal',
+    text: 'Legal',
+    linkProps: {
+      href: 'https://www.pingidentity.com/en/legal.html',
+      'aria-label': 'Legal'
+    }
+  }, {
+    key: 'Privacy',
+    text: 'Privacy',
+    linkProps: {
+      href: 'https://www.pingidentity.com/en-us/docs/legal/privacy',
+      'aria-label': 'Privacy'
+    }
+  }, {
+    key: 'Security',
+    text: 'Security',
+    linkProps: {
+      href: 'https://www.pingidentity.com/en/company/security-at-ping-identity.html',
+      'aria-label': 'Security'
+    }
+  }];
+  var socialLinks = [{
+    key: 'twitter',
+    iconClass: fab.faXTwitter,
+    linkProps: {
+      href: 'https://twitter.com/pingidentity',
+      'aria-label': 'Connect with us via X Social Media'
+    }
+  }, {
+    key: 'linkedin',
+    iconClass: fab.faLinkedinIn,
+    linkProps: {
+      href: 'https://www.linkedin.com/company/ping-identity',
+      'aria-label': 'Connect with us via LinkedIn'
+    }
+  }, {
+    key: 'facebook',
+    iconClass: fab.faFacebookF,
+    linkProps: {
+      href: 'https://www.facebook.com/pingidentitypage',
+      'aria-label': 'Connect with us via Facebook'
+    }
+  }, {
+    key: 'youtube',
+    iconClass: fab.faYoutube,
+    linkProps: {
+      href: 'https://www.youtube.com/user/pingidentitytv',
+      'aria-label': 'Connect with us via YouTube'
+    }
+  }, {
+    key: 'github',
+    iconClass: fab.faGithub,
+    linkProps: {
+      href: 'https://github.com/pingidentity',
+      'aria-label': 'Connect with us via Github'
+    }
+  }, {
+    key: 'mail',
+    iconClass: far.faEnvelope,
+    linkProps: {
+      href: 'https://4.pingidentity.com/PreferenceCenter.html',
+      'aria-label': 'Connect with us via Mail'
+    }
+  }, {
+    key: 'instagram',
+    iconClass: fab.faInstagram,
+    linkProps: {
+      href: 'https://www.instagram.com/pingidentity',
+      'aria-label': 'Connect with us via Instagram'
+    }
+  }];
+  return ___EmotionJSX(Footer, null, ___EmotionJSX(Box, {
+    alignItems: "center",
+    justifyContent: "flex-start",
+    variant: "footer.footerLeftSection",
+    flex: "1 0 auto"
+  }, ___EmotionJSX(CopyrightText, {
+    linkProps: {
+      href: 'https://www.pingidentity.com',
+      children: 'Ping Identity'
+    }
+  }), ___EmotionJSX(Link, {
+    variant: "footerEALink",
+    href: "https://www.levelaccess.com/a/pingidentity"
+  }, ___EmotionJSX(Image, {
+    src: eAIcon,
+    alt: "Essential Accessibility Icon"
+  })), ___EmotionJSX(FooterNav, null, _mapInstanceProperty(legalLinks).call(legalLinks, function (link) {
+    return ___EmotionJSX(FooterNavItem, {
+      key: link.key
+    }, ___EmotionJSX(Link, _extends({
+      variant: "footerLink"
+    }, link.linkProps), link.text));
+  }))), ___EmotionJSX(Box, {
+    flex: "1 0 auto"
+  }, ___EmotionJSX(FooterNav, null, _mapInstanceProperty(socialLinks).call(socialLinks, function (link) {
+    return ___EmotionJSX(FooterNavItem, {
+      key: link.key
+    }, ___EmotionJSX(Link, _extends({
+      variant: "footerLink"
+    }, link.linkProps), ___EmotionJSX(FontAwesomeIcon, {
+      icon: link.iconClass,
+      size: "lg"
+    })));
+  }))));
+};

package/lib/components/Footer/stories/NextGenDarkFooterStory.chomatic.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AstroProvider, NextGenDarkTheme } from '../../..';
+import { FooterNextGenComponent } from './FooterNextGenComponent';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only Onyx Dark Footer'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(AstroProvider, {
+    themeOverrides: [NextGenDarkTheme]
+  }, ___EmotionJSX(FooterNextGenComponent, null));
+};

package/lib/components/Footer/stories/NextGenFooterStory.chromatic.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AstroProvider, NextGenTheme } from '../../..';
+import { FooterNextGenComponent } from './FooterNextGenComponent';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only Onyx Footer'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(AstroProvider, {
+    theme: NextGenTheme
+  }, ___EmotionJSX(FooterNextGenComponent, null));
+};

package/lib/components/Icon/Icon.js

@@ -9,6 +9,8 @@ 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 _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["color", "icon", "sx", "size", "variant", "title"];
 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';
@@ -19,31 +21,32 @@ var Icon = /*#__PURE__*/forwardRef(function (props, ref) {
   var color = props.color,
     IconComponent = props.icon,
     sx = props.sx,
-    size = props.size;
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'sm' : _props$size,
+    variant = props.variant,
+    title = props.title,
+    others = _objectWithoutProperties(props, _excluded);
   var theme = useGetTheme();
   var _useTShirtSize = useTShirtSize({
       size: size,
       sizes: theme.tShirtSizes
     }),
     sizeProps = _useTShirtSize.sizeProps;
-  var title = props.title || (_typeof(IconComponent) === 'object' && 'type' in IconComponent ? {
+  var resolvedTitle = title !== null && title !== void 0 ? title : _typeof(IconComponent) === 'object' && 'type' in IconComponent ? {
     name: IconComponent.type.name
-  } : '');
+  } : '';
   return ___EmotionJSX(Box, _extends({
     as: IconComponent,
     ref: ref,
-    title: title
-  }, props, {
-    size: sizeProps.size,
     role: "img",
+    title: resolvedTitle,
+    variant: variant,
+    size: sizeProps.size,
     sx: _objectSpread({
       fill: color,
       minWidth: sizeProps.size
     }, sx)
-  }));
+  }, others));
 });
-Icon.defaultProps = {
-  size: 20
-};
 Icon.displayName = 'Icon';
 export default Icon;

package/lib/components/IconButton/IconButton.styles.js

@@ -134,6 +134,10 @@ var applicationPortalPinned = _objectSpread(_objectSpread({}, base), {}, {
     }
   }
 });
+var searchClearButton = _objectSpread(_objectSpread({}, base), {}, {
+  position: 'absolute',
+  right: 10
+});
 export default {
   base: base,
   bidirectional: bidirectional,
@@ -159,5 +163,6 @@ export default {
   },
   // Recipe related variants
   applicationPortal: applicationPortal,
-  applicationPortalPinned: applicationPortalPinned
+  applicationPortalPinned: applicationPortalPinned,
+  searchClearButton: searchClearButton
 };

package/lib/components/IconWrapper/iconWrapperAttributes.js

@@ -1,4 +1,4 @@
-var colorOptions = ['cyan', 'orange', 'red', 'green', 'purple', 'yellow', 'teal', 'pink'];
+var colorOptions = ['cyan', 'orange', 'red', 'green', 'purple', 'yellow', 'teal', 'pink', 'blue', 'indigo'];
 var sizes = ['sm', 'md', 'lg'];
 export var iconWrapperArgTypes = {
   color: {

package/lib/components/Link/Link.styles.js

@@ -44,8 +44,38 @@ var popover = _objectSpread(_objectSpread({}, app), {}, {
     cursor: 'pointer'
   }
 });
+var copyRightLink = {
+  fontFamily: 'standard',
+  color: 'gray-100',
+  fontSize: 'md',
+  textDecoration: 'none',
+  borderRadius: '1px',
+  '&.is-hovered': {
+    color: '#c5d2df'
+  }
+};
+var footerLink = {
+  fontFamily: 'standard',
+  px: 'md',
+  py: 'sm',
+  fontSize: 'md',
+  color: 'gray-100',
+  textDecoration: 'none',
+  borderRadius: '1px',
+  '&.is-hovered': {
+    color: '#c5d2df'
+  }
+};
+var footerEALink = _objectSpread(_objectSpread({}, footerLink), {}, {
+  display: 'flex',
+  flexShrink: '0',
+  justifyContent: 'center'
+});
 export default {
   app: app,
   popover: popover,
-  web: web
+  web: web,
+  copyRightLink: copyRightLink,
+  footerLink: footerLink,
+  footerEALink: footerEALink
 };

package/lib/components/ListView/ListView.js

@@ -160,6 +160,11 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
     onScroll: resetHoverState,
     tabIndex: isFocusable ? 0 : -1,
     shouldUseVirtualFocus: !isFocusable
+    // added to remove the outline when using keyboard navigation encountered during UIP-7501
+    ,
+    style: {
+      outline: 'none'
+    }
   }), function (type, item) {
     if (type === 'item') {
       if (props.selectionMode === 'expansion') {