@pingux/astro 2.207.1-alpha.0 → 2.208.1-alpha.0

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

@@ -145,6 +145,46 @@ var healthyStatusBadge = _objectSpread({
 var secondaryStatusBadge = _objectSpread({
   border: 'none'
 }, secondary);
+var tableBaseBadgeBaseStyle = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  minWidth: '100px',
+  border: 'none'
+});
+var tableBaseBadgeSpanStyle = {
+  fontSize: '11.25px',
+  lineHeight: '1'
+};
+var tableBaseBadge = {
+  active: _objectSpread(_objectSpread({}, tableBaseBadgeBaseStyle), {}, {
+    backgroundColor: "".concat(astroTokens.color.blue[100], " !important"),
+    '& > span': _objectSpread(_objectSpread({}, tableBaseBadgeSpanStyle), {}, {
+      color: astroTokens.color.blue[600]
+    })
+  }),
+  warning: _objectSpread(_objectSpread({}, tableBaseBadgeBaseStyle), {}, {
+    backgroundColor: "".concat(astroTokens.color.yellow[100], " !important"),
+    '& > span': _objectSpread(_objectSpread({}, tableBaseBadgeSpanStyle), {}, {
+      color: astroTokens.color.blue[600]
+    })
+  }),
+  critical: _objectSpread(_objectSpread({}, tableBaseBadgeBaseStyle), {}, {
+    backgroundColor: "".concat(astroTokens.color.red[100], " !important"),
+    '& > span': _objectSpread(_objectSpread({}, tableBaseBadgeSpanStyle), {}, {
+      color: astroTokens.color.red[800]
+    })
+  }),
+  healthy: _objectSpread(_objectSpread({}, tableBaseBadgeBaseStyle), {}, {
+    backgroundColor: "".concat(astroTokens.color.green[100], " !important"),
+    '& > span': _objectSpread(_objectSpread({}, tableBaseBadgeSpanStyle), {}, {
+      color: astroTokens.color.green[800]
+    })
+  }),
+  secondary: _objectSpread(_objectSpread({}, tableBaseBadgeBaseStyle), {}, {
+    backgroundColor: "".concat(astroTokens.color.gray[100], " !important"),
+    '& > span': _objectSpread(_objectSpread({}, tableBaseBadgeSpanStyle), {}, {
+      color: astroTokens.color.gray[800]
+    })
+  })
+};
 var countBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   backgroundColor: '#455469 !important',
   '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
@@ -198,5 +238,6 @@ export var badges = {
   },
   warningCalloutBadge: {
     backgroundColor: 'white !important'
-  }
+  },
+  tableBaseBadge: tableBaseBadge
 };

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

@@ -82,7 +82,9 @@ var suggestionRow = _objectSpread(_objectSpread({}, baseSuggestion), {}, {
 var suggestionColumn = _objectSpread(_objectSpread({}, baseSuggestion), {}, {
   display: 'flex'
 });
-var tableWrapper = _objectSpread({}, container);
+var tableWrapper = _objectSpread(_objectSpread({}, container), {}, {
+  boxShadow: 'standard'
+});
 export default {
   interactive: interactive,
   dark: dark,

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

@@ -10,7 +10,6 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { astroTokens } from '@pingux/onyx-tokens';
-import colors from '../colors/colors';
 import { defaultFocus as baseFocus } from './button';
 var borderRadius = '16px';
 var defaultFocus = _objectSpread(_objectSpread({}, baseFocus), {}, {
@@ -53,37 +52,38 @@ var container = {
 var caption = {
   backgroundColor: 'backgroundBase',
   px: 'lg',
-  color: 'text.primary',
+  color: astroTokens.color.font.base,
   borderBottom: '1px solid',
-  borderBottomColor: 'border.base',
+  borderBottomColor: astroTokens.color.common.border,
   borderTopLeftRadius: borderRadius,
   borderTopRightRadius: borderRadius
 };
 var row = {
   borderBottom: '1px solid',
-  borderBottomColor: 'border.base',
+  borderBottomColor: astroTokens.color.common.border,
   '&.is-focused': _objectSpread({}, defaultFocus),
   '&.is-hovered': {
-    bg: 'background.hover',
+    bg: astroTokens.color['table-row'].hover.bg,
     '& > td:last-of-type': {
-      bg: 'background.hover'
+      bg: astroTokens.color['table-row'].hover.bg
     }
   },
   '&:nth-of-type(odd)': {
-    bg: 'backgroundBase',
+    bg: astroTokens.color.common.bg.base,
     '&.is-hovered': {
-      bg: 'background.hover'
+      bg: astroTokens.color['table-row'].hover.bg
     },
     '& > td:last-of-type': {
-      bg: 'backgroundBase'
+      bg: astroTokens.color.common.bg.base
     }
   }
 };
 var thead = {
-  borderBottomColor: 'border.base',
+  borderBottomColor: astroTokens.color.common.border,
   backgroundColor: 'backgroundBase',
   '&.is-sticky': {
-    boxShadow: "0 1px 0 ".concat(colors.border.base)
+    border: 'none',
+    boxShadow: "0 1px 0 ".concat(astroTokens.color.common.border)
   }
 };
 var resizer = {
@@ -92,17 +92,13 @@ var resizer = {
 var head = {
   px: 'lg',
   py: 'sm',
-  fontSize: 'md',
-  fontWeight: '2',
-  color: 'text.primary',
-  lineHeight: 'body',
   '&.is-focused': _objectSpread({}, defaultFocus),
   '&:last-of-type': {
     backgroundColor: 'backgroundBase'
   }
 };
 var tbody = {
-  borderTopColor: 'border.base',
+  borderTopColor: astroTokens.color.common.border,
   borderBottom: 'unset',
   backgroundColor: 'backgroundBase',
   borderBottomLeftRadius: borderRadius,
@@ -110,7 +106,7 @@ var tbody = {
 };
 var data = _objectSpread(_objectSpread({}, head), {}, {
   py: 'md',
-  fontWeight: '1',
+  fontWeight: '0',
   '&:last-of-type': {
     backgroundColor: 'backgroundBase',
     zIndex: 1

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

@@ -255,6 +255,12 @@ export var text = _objectSpread(_objectSpread({
   },
   stepperTabContent: stepperTabContent,
   stepperTabContentHeader: stepperTabContentHeader,
+  headText: {
+    fontSize: 'md',
+    fontWeight: '2',
+    color: astroTokens.color.font.base,
+    lineHeight: 'xs'
+  },
   label: label,
   linkSelectFieldLabel: _objectSpread(_objectSpread({}, label), {}, {
     color: astroTokens.color.font.link

package/lib/types/accessibilityTable.js

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

package/lib/types/index.js

@@ -1,3 +1,4 @@
+export * from './accessibilityTable';
 export * from './arrayField';
 export * from './avatar';
 export * from './badge';

package/lib/utils/docUtils/AccessibilityTable.js

@@ -0,0 +1,30 @@
+import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React from 'react';
+import Markdown from 'markdown-to-jsx';
+import { v4 as uuid } from 'uuid';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var AccessibilityTable = function AccessibilityTable(_ref) {
+  var keyboardRows = _ref.keyboardRows,
+    keyboardDescription = _ref.keyboardDescription,
+    screenReaderRows = _ref.screenReaderRows;
+  var hasKeyboard = _Array$isArray(keyboardRows) && keyboardRows.length > 0;
+  var hasScreenReader = _Array$isArray(screenReaderRows) && screenReaderRows.length > 0;
+  if (!hasKeyboard && !hasScreenReader) {
+    return null;
+  }
+  return ___EmotionJSX(React.Fragment, null, hasKeyboard && ___EmotionJSX(React.Fragment, null, ___EmotionJSX("h4", null, "Keyboard Navigation"), ___EmotionJSX("p", null, keyboardDescription || 'These keys provide additional functionality to the component.'), ___EmotionJSX("table", null, ___EmotionJSX("thead", null, ___EmotionJSX("tr", null, ___EmotionJSX("th", null, "Key"), ___EmotionJSX("th", null, "Function"))), ___EmotionJSX("tbody", null, _mapInstanceProperty(keyboardRows).call(keyboardRows, function (row) {
+    return ___EmotionJSX("tr", {
+      key: row.key + uuid()
+    }, ___EmotionJSX("td", null, ___EmotionJSX("span", null, row.key)), ___EmotionJSX("td", null, ___EmotionJSX(Markdown, {
+      options: {
+        forceInline: true
+      }
+    }, row.description)));
+  })))), hasScreenReader && ___EmotionJSX(React.Fragment, null, ___EmotionJSX("h4", null, "Screen Readers"), ___EmotionJSX("p", null, "This component uses the following attributes to assist screen readers:"), ___EmotionJSX("ul", null, _mapInstanceProperty(screenReaderRows).call(screenReaderRows, function (item) {
+    return ___EmotionJSX("li", {
+      key: item + uuid()
+    }, ___EmotionJSX(Markdown, null, item));
+  }))));
+};
+export default AccessibilityTable;

package/lib/utils/docUtils/AccessibilityTable.test.js

@@ -0,0 +1,190 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { universalComponentTests } from '../testUtils/universalComponentTest';
+import AccessibilityTable from './AccessibilityTable';
+
+// Needs to be added to each component test file
+import { jsx as ___EmotionJSX } from "@emotion/react";
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(AccessibilityTable, _extends({
+      keyboardRows: [{
+        key: 'Tab',
+        description: 'Focus next element'
+      }]
+    }, props));
+  },
+  skipForwardRefTest: true
+});
+test('renders nothing when both keyboardRows and screenReaderRows are absent', function () {
+  var _render = render(___EmotionJSX(AccessibilityTable, null)),
+    container = _render.container;
+  expect(container).toBeEmptyDOMElement();
+});
+test('renders nothing when both props are provided as empty arrays', function () {
+  var _render2 = render(___EmotionJSX(AccessibilityTable, {
+      keyboardRows: [],
+      screenReaderRows: []
+    })),
+    container = _render2.container;
+  expect(container).toBeEmptyDOMElement();
+});
+describe('keyboard navigation section', function () {
+  var keyboardRows = [{
+    key: 'Tab',
+    description: 'Focus next element'
+  }, {
+    key: 'Shift+Tab',
+    description: 'Focus previous element'
+  }];
+  test('renders the Keyboard Navigation heading', function () {
+    render(___EmotionJSX(AccessibilityTable, {
+      keyboardRows: keyboardRows
+    }));
+    expect(screen.getByText('Keyboard Navigation')).toBeInTheDocument();
+  });
+  test('renders the keyboard section description paragraph', function () {
+    render(___EmotionJSX(AccessibilityTable, {
+      keyboardRows: keyboardRows
+    }));
+    expect(screen.getByText('These keys provide additional functionality to the component.')).toBeInTheDocument();
+  });
+  test('renders Key and Function column headers', function () {
+    render(___EmotionJSX(AccessibilityTable, {
+      keyboardRows: keyboardRows
+    }));
+    expect(screen.getByText('Key')).toBeInTheDocument();
+    expect(screen.getByText('Function')).toBeInTheDocument();
+  });
+  test('renders one row per keyboardRows entry', function () {
+    render(___EmotionJSX(AccessibilityTable, {
+      keyboardRows: keyboardRows
+    }));
+    var rows = screen.getAllByRole('row');
+    // thead has 1 row, tbody has 2 rows (one per entry)
+    expect(rows).toHaveLength(3);
+  });
+  test('renders the key cell for each row', function () {
+    render(___EmotionJSX(AccessibilityTable, {
+      keyboardRows: keyboardRows
+    }));
+    expect(screen.getByText('Tab')).toBeInTheDocument();
+    expect(screen.getByText('Shift+Tab')).toBeInTheDocument();
+  });
+  test('does not render the Screen Readers section', function () {
+    render(___EmotionJSX(AccessibilityTable, {
+      keyboardRows: keyboardRows
+    }));
+    expect(screen.queryByText('Screen Readers')).not.toBeInTheDocument();
+  });
+  test('renders a custom keyboardDescription when the prop is provided', function () {
+    render(___EmotionJSX(AccessibilityTable, {
+      keyboardRows: keyboardRows,
+      keyboardDescription: "Custom keyboard description for this component."
+    }));
+    expect(screen.getByText('Custom keyboard description for this component.')).toBeInTheDocument();
+  });
+  test('does not render a custom keyboardDescription when the prop is omitted', function () {
+    render(___EmotionJSX(AccessibilityTable, {
+      keyboardRows: keyboardRows
+    }));
+    expect(screen.queryByText('Custom keyboard description for this component.')).not.toBeInTheDocument();
+  });
+  test('falls back to the default description when keyboardDescription is an empty string', function () {
+    render(___EmotionJSX(AccessibilityTable, {
+      keyboardRows: keyboardRows,
+      keyboardDescription: ""
+    }));
+    expect(screen.getByText('These keys provide additional functionality to the component.')).toBeInTheDocument();
+  });
+});
+describe('screen reader section', function () {
+  var screenReaderRows = ['aria-label', 'aria-expanded'];
+  test('renders the Screen Readers heading', function () {
+    render(___EmotionJSX(AccessibilityTable, {
+      screenReaderRows: screenReaderRows
+    }));
+    expect(screen.getByText('Screen Readers')).toBeInTheDocument();
+  });
+  test('renders the screen reader section description paragraph', function () {
+    render(___EmotionJSX(AccessibilityTable, {
+      screenReaderRows: screenReaderRows
+    }));
+    expect(screen.getByText('This component uses the following attributes to assist screen readers:')).toBeInTheDocument();
+  });
+  test('renders a list with one item per screenReaderRows entry', function () {
+    render(___EmotionJSX(AccessibilityTable, {
+      screenReaderRows: screenReaderRows
+    }));
+    var items = screen.getAllByRole('listitem');
+    expect(items).toHaveLength(screenReaderRows.length);
+  });
+  test('renders text content for each screen reader row item', function () {
+    render(___EmotionJSX(AccessibilityTable, {
+      screenReaderRows: screenReaderRows
+    }));
+    expect(screen.getByText('aria-label')).toBeInTheDocument();
+    expect(screen.getByText('aria-expanded')).toBeInTheDocument();
+  });
+  test('does not render the Keyboard Navigation section', function () {
+    render(___EmotionJSX(AccessibilityTable, {
+      screenReaderRows: screenReaderRows
+    }));
+    expect(screen.queryByText('Keyboard Navigation')).not.toBeInTheDocument();
+  });
+});
+describe('both sections together', function () {
+  var keyboardRows = [{
+    key: 'Tab',
+    description: 'Focus next element'
+  }];
+  var screenReaderRows = ['aria-label'];
+  test('renders both headings when both props are provided', function () {
+    render(___EmotionJSX(AccessibilityTable, {
+      keyboardRows: keyboardRows,
+      screenReaderRows: screenReaderRows
+    }));
+    expect(screen.getByText('Keyboard Navigation')).toBeInTheDocument();
+    expect(screen.getByText('Screen Readers')).toBeInTheDocument();
+  });
+  test('renders both the table and the list', function () {
+    render(___EmotionJSX(AccessibilityTable, {
+      keyboardRows: keyboardRows,
+      screenReaderRows: screenReaderRows
+    }));
+    expect(screen.getByRole('table')).toBeInTheDocument();
+    expect(screen.getByRole('list')).toBeInTheDocument();
+  });
+});
+describe('markdown rendering', function () {
+  test('renders bold markdown in row.description as a strong element', function () {
+    var keyboardRows = [{
+      key: 'Enter',
+      description: '**Confirm** selection'
+    }];
+    render(___EmotionJSX(AccessibilityTable, {
+      keyboardRows: keyboardRows
+    }));
+    var strongEl = screen.getByText('Confirm');
+    expect(strongEl.tagName).toBe('STRONG');
+  });
+  test('renders plain text description via markdown-to-jsx without error', function () {
+    var keyboardRows = [{
+      key: 'Tab',
+      description: 'Focus next element'
+    }];
+    render(___EmotionJSX(AccessibilityTable, {
+      keyboardRows: keyboardRows
+    }));
+    expect(screen.getByText('Focus next element')).toBeInTheDocument();
+  });
+  test('renders bold markdown in screenReaderRows item as a strong element', function () {
+    var screenReaderRows = ['**aria-label**: describes the element'];
+    render(___EmotionJSX(AccessibilityTable, {
+      screenReaderRows: screenReaderRows
+    }));
+    var strongEl = screen.getByText('aria-label');
+    expect(strongEl.tagName).toBe('STRONG');
+  });
+});

package/lib/utils/docUtils/accessibilityTableConstants.js

@@ -0,0 +1,130 @@
+export var KeyboardRows = {
+  shiftTabFocusPrevious: {
+    key: 'Shift + Tab',
+    description: 'Moves focus to the previous focusable component.'
+  },
+  tabField: {
+    key: 'Tab',
+    description: 'The field is focusable using the Tab key and follows the page tab sequence.'
+  },
+  tabFocusesField: {
+    key: 'Tab',
+    description: 'Focuses the field and follows the page tab sequence.'
+  },
+  spaceEnterSelectsButton: {
+    key: 'Space or Enter',
+    description: 'Selects the button.'
+  },
+  tabFocusesButton: {
+    key: 'Tab',
+    description: 'Focuses the button and follows the page tab sequence.'
+  },
+  homeFirstListboxItem: {
+    key: 'Home(Fn + Right Arrow Key) Or Control/Command + Home',
+    description: 'Shifts the focus to the first item in the listbox.'
+  },
+  endLastListboxItem: {
+    key: 'End(Fn + Left Arrow Key) Or Control/Command + End',
+    description: 'Shifts the focus to the last item in the listbox.'
+  },
+  tabNextFocusableComponent: {
+    key: 'Tab',
+    description: 'Moves focus to the next focusable component and follows the page tab sequence.'
+  },
+  tabFocusesItem: {
+    key: 'Tab',
+    description: 'Focuses item and follows the page tab sequence.'
+  },
+  tabAccordionFocusable: {
+    key: 'Tab',
+    description: 'Moves focus to the next focusable component. All focusable components in the accordion are included in the page tab sequence.'
+  },
+  shiftTabAccordionFocusPrevious: {
+    key: 'Shift + Tab',
+    description: 'Moves focus to the previous focusable component. All focusable components in the accordion are included in the page tab sequence.'
+  },
+  spaceEnterToggleAccordion: {
+    key: 'Space or Enter',
+    description: 'Toggles the component when the accordion is focused.'
+  },
+  escCollapseAccordion: {
+    key: 'Esc',
+    description: 'Pressing the escape key when the accordion is open and focused collapses the component.'
+  },
+  tabCalendar: {
+    key: 'Tab',
+    description: 'Components in the calendar are focusable and follow the page tab sequence.'
+  },
+  homeFirstCalendarDate: {
+    key: 'Pressing Home:(Fn + Right Arrow Key) Or Control or Command + Home',
+    description: 'Shifts the focus to the first calendar date.'
+  },
+  pageUpPreviousMonth: {
+    key: 'Page up',
+    description: 'Changes the grid of dates to the previous month.'
+  },
+  pageDownNextMonth: {
+    key: 'Page down',
+    description: 'Changes the grid of dates to the next month.'
+  },
+  shiftPageUpPreviousYear: {
+    key: 'Shift + page up',
+    description: 'Changes the grid of dates to the same month in the previous year.'
+  },
+  shiftPageDownNextYear: {
+    key: 'Shift + page down',
+    description: 'Changes the grid of dates to the same month in the next year.'
+  },
+  spaceEnterSelectsComponent: {
+    key: 'Space or Enter',
+    description: 'Selects the component when it is focused.'
+  },
+  typingOpenPopover: {
+    key: 'Typing in input field',
+    description: 'Adds focus to it and opens the popover.'
+  },
+  spaceEnterSelectsItem: {
+    key: 'Space or Enter',
+    description: 'Selects the item.'
+  },
+  spaceEnterSelectsComponentSimple: {
+    key: 'Space or Enter',
+    description: 'Selects the component.'
+  },
+  tabFocusesComponent: {
+    key: 'Tab',
+    description: 'Focuses the component and follows the page tab sequence.'
+  },
+  tabInput: {
+    key: 'Tab',
+    description: 'The input is focusable using the Tab key and follows the page tab sequence.'
+  },
+  homeFirstRow: {
+    key: 'Home(Fn + Right Arrow Key) Or Control/Command + Home',
+    description: 'Shifts the focus to the first row.'
+  },
+  endLastVisibleRow: {
+    key: 'End(Fn + Left Arrow Key) Or Control/Command + End',
+    description: 'Shifts the focus to the last visible row.'
+  },
+  arrowKeysMovePopoverSelection: {
+    key: 'Arrow keys',
+    description: 'Moves the selection through the popover.'
+  },
+  escClosePopoverFocusPrevious: {
+    key: 'Esc',
+    description: 'Pressing the escape key closes the popover and focuses on the previous focusable component.'
+  }
+};
+export var ScreenReaderRows = {
+  ariaLabelAccessibleName: 'The **`aria-label`** attribute is used to provide an accessible name.',
+  eachLinkAriaLabel: 'Each Link component uses the **`aria-label`** attribute to provide an accessible name.',
+  ariaLiveAnnounce: 'The **`aria-live`** attribute is used to announce content changes in a live region.',
+  ariaOrientationWithTrailingSpace: 'The **`aria-orientation`** attribute indicates whether the orientation is horizontal, vertical, unknown, or ambiguous. ',
+  accordionAriaExpanded: 'The accordion header button uses the **`aria-expanded`** attribute to indicate when the content expands and collapses.',
+  iconAriaHidden: 'The Icon uses the **`aria-hidden`** attribute to hide its content from assistive technology.',
+  triggerAriaExpandedExpandCollapse: 'The trigger button uses the **`aria-expanded`** attribute to indicate when the content expands and collapses.',
+  ariaLabelledByInvalidFalse: 'This component uses the **`aria-labelledby`** attribute pointing to the label, and the **`aria-invalid`** attribute to detect incorrect values or status errors, which is set to "False" by default.',
+  ariaOrientationNoTrailingSpace: 'The **`aria-orientation`** attribute indicates whether the orientation is horizontal, vertical, unknown, or ambiguous.',
+  componentAriaLabel: 'This component uses the **`aria-label`** attribute to provide an accessible name.'
+};

package/package.json

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