@pingux/astro 2.121.0-alpha.1 → 2.121.0

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/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/Text/Text.styles.js

@@ -120,6 +120,13 @@ var HTags = {
     lineHeight: '16px'
   })
 };
+var copyRightText = {
+  fontSize: 'md',
+  fontFamily: 'standard',
+  color: 'gray-100',
+  lineHeight: 'body',
+  my: 'sm'
+};
 var attachmentTitle = _objectSpread(_objectSpread(_objectSpread({}, base), textEllipsis), {}, {
   fontWeight: 2
 });
@@ -230,5 +237,6 @@ export var text = _objectSpread(_objectSpread(_objectSpread({
   }),
   textEllipsis: textEllipsis,
   title: title,
+  copyRightText: copyRightText,
   attachmentTitle: attachmentTitle
 });

package/lib/index.js

@@ -82,6 +82,8 @@ export { default as EnvironmentBreadcrumb } from './components/EnvironmentBreadc
 export { default as FieldHelperText } from './components/FieldHelperText';
 export * from './components/FieldHelperText';
 export { default as FileInputField } from './components/FileInputField';
+export { default as Footer } from './components/Footer';
+export * from './components/Footer';
 export { default as Grid } from './components/Grid';
 export { default as HelpHint } from './components/HelpHint';
 export * from './components/HelpHint';

package/lib/styles/themeOverrides/nextGenDarkMode/variants/footer.js

@@ -0,0 +1,6 @@
+var container = {
+  backgroundColor: 'background.secondary'
+};
+export var footer = {
+  container: container
+};

package/lib/styles/themeOverrides/nextGenDarkMode/variants/links.js

@@ -31,9 +31,21 @@ var footerLinks = _objectSpread({}, sideNav);
 var footerHeader = _objectSpread(_objectSpread({}, footerLinks), {}, {
   fontWeight: '2'
 });
+var copyRightLink = _objectSpread(_objectSpread({}, nextGen), {}, {
+  color: 'gray-400'
+});
+var footerLink = _objectSpread(_objectSpread({}, nextGen), {}, {
+  color: 'gray-400'
+});
+var footerEALink = _objectSpread(_objectSpread({}, nextGen), {}, {
+  color: 'gray-400'
+});
 export default {
   nextGen: nextGen,
   sideNav: sideNav,
   footerLinks: footerLinks,
-  footerHeader: footerHeader
+  footerHeader: footerHeader,
+  copyRightLink: copyRightLink,
+  footerLink: footerLink,
+  footerEALink: footerEALink
 };

package/lib/styles/themeOverrides/nextGenDarkMode/variants/text.js

@@ -11,5 +11,8 @@ export var text = {
   itemTitle: {
     fontWeight: 2,
     color: 'text.secondary'
+  },
+  copyRightText: {
+    color: 'gray-400'
   }
 };

package/lib/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -1,4 +1,5 @@
 import { avatar } from './avatar';
+import { footer } from './footer';
 import iconBadge from './iconBadge';
 import { listView, listViewItem, lisViewItemChart } from './listview';
 import { menu, menuItem } from './menu';
@@ -75,6 +76,7 @@ export default {
   tab: tab,
   iconBadge: iconBadge,
   skeleton: skeleton,
+  footer: footer,
   dataTable: {
     selectableTableRow: {
       '&.is-selected': {

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -14,5 +14,5 @@ export var astroBlacklistStory = {
   DataTable: ['Onyx Default'],
   NavBar: ['Onyx Default']
 };
-export var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input'];
+export var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input', 'Footer'];
 export default nextGenConvertedComponents;

package/lib/styles/themes/next-gen/variants/button.js

@@ -17,7 +17,7 @@ var primaryBlue = colors.primary,
 var transitions = {
   transition: 'color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out'
 };
-var defaultFocus = {
+export var defaultFocus = {
   outline: '2px solid',
   outlineColor: 'active',
   outlineOffset: '3px'

package/lib/styles/themes/next-gen/variants/footer.js

@@ -0,0 +1,35 @@
+var container = {
+  fontFamily: 'standard',
+  justifyContent: 'center',
+  backgroundColor: 'gray-800'
+};
+var wrapper = {
+  px: ['1.5rem', '1.5rem', '1.5rem', '3rem', '3rem', '3rem'],
+  py: 'sm',
+  maxWidth: '1540px',
+  mx: 'auto',
+  width: '100%',
+  flexDirection: ['column', 'column', 'column', 'column', 'column', 'row'],
+  justifyContent: 'space-between',
+  alignItems: 'center'
+};
+var footerLeftSection = {
+  columnGap: 'sm',
+  flexDirection: ['column', 'column', 'column', 'column', 'column', 'row']
+};
+var footerNav = {
+  listStyle: 'none',
+  margin: '0',
+  padding: '0',
+  alignItems: 'center',
+  justifyContent: ['center', 'center', 'center', 'center', 'center', 'flex-end'],
+  gap: 'xs',
+  flexWrap: 'wrap',
+  my: 'sm'
+};
+export var footer = {
+  container: container,
+  wrapper: wrapper,
+  footerLeftSection: footerLeftSection,
+  footerNav: footerNav
+};

package/lib/styles/themes/next-gen/variants/links.js

@@ -9,7 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 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 buttons from './button';
+import buttons, { defaultFocus } from './button';
 var navBarFocus = {
   outline: '2px solid',
   outlineColor: 'active'
@@ -72,6 +72,15 @@ var navBarLogoLink = {
   py: 'sm',
   '&.is-focused': _objectSpread({}, navBarFocus)
 };
+var copyRightLink = {
+  '&.is-focused': _objectSpread({}, defaultFocus)
+};
+var footerLink = {
+  '&.is-focused': _objectSpread({}, defaultFocus)
+};
+var footerEALink = {
+  '&.is-focused': _objectSpread({}, defaultFocus)
+};
 export default {
   nextGen: nextGen,
   onyx: onyx,
@@ -80,5 +89,8 @@ export default {
   footerHeader: footerHeader,
   button: button,
   primaryButton: primaryButton,
-  navBarLogoLink: navBarLogoLink
+  navBarLogoLink: navBarLogoLink,
+  copyRightLink: copyRightLink,
+  footerEALink: footerEALink,
+  footerLink: footerLink
 };

package/lib/styles/themes/next-gen/variants/variants.js

@@ -15,6 +15,7 @@ import codeView from '../codeView/codeView';
 import { avatar } from './avatar';
 import button from './button';
 import { dataTable } from './dataTable';
+import { footer } from './footer';
 import iconWrapper from './iconWrapper';
 import { listView, listViewItem, lisViewItemChart } from './listview';
 import { menu, menuItem } from './menu';
@@ -324,5 +325,6 @@ export default {
   suggestion: suggestion,
   response: response,
   skeleton: skeleton,
+  footer: footer,
   loader: loader
 };

package/lib/styles/variants/variants.js

@@ -23,6 +23,7 @@ import copyText from '../../components/CopyText/CopyText.styles';
 import dataTable from '../../components/DataTable/DataTable.styles';
 import environmentBreadcrumb from '../../components/EnvironmentBreadcrumb/EnvironmentalBreadcrumb.styles';
 import fieldHelperText from '../../components/FieldHelperText/FieldHelperText.styles';
+import footer from '../../components/Footer/Footer.styles';
 import helpHint from '../../components/HelpHint/HelpHint.styles';
 import imageUpload from '../../components/ImageUploadField/imageUpload';
 import listBox from '../../components/ListBox/ListBox.styles';
@@ -71,6 +72,7 @@ export default _objectSpread({
   dataTable: dataTable,
   environmentBreadcrumb: environmentBreadcrumb,
   fieldHelperText: fieldHelperText,
+  footer: footer,
   helpHint: helpHint,
   imageUpload: imageUpload,
   listBox: listBox,

package/lib/types/footer.js

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

package/lib/types/index.js

@@ -15,6 +15,7 @@ export * from './copyText';
 export * from './dataTable';
 export * from './environmentBreadcrumb';
 export * from './fieldHelperText';
+export * from './footer';
 export * from './grid';
 export * from './helpHint';
 export * from './icon';