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

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

@@ -89,11 +89,11 @@ var objects = [{
   total_grant: '75,000'
 }];
 var statusVariant = {
-  Pending: 'warningStatusBadge',
-  Failed: 'criticalStatusBadge',
-  Rejected: 'criticalStatusBadge',
-  Active: 'healthyStatusBadge',
-  Inactive: 'secondaryStatusBadge'
+  Pending: 'tableBaseBadge.secondary',
+  Failed: 'tableBaseBadge.critical',
+  Rejected: 'tableBaseBadge.critical',
+  Active: 'tableBaseBadge.healthy',
+  Inactive: 'tableBaseBadge.secondary'
 };
 var Default = exports.Default = function Default() {
   return (0, _react2.jsx)(_.Card, {
@@ -256,11 +256,11 @@ var DynamicWithSorting = exports.DynamicWithSorting = function DynamicWithSortin
   }, {
     name: 'Population',
     key: 'population',
-    isSortable: true
+    isSortable: false
   }, {
     name: 'Continent',
     key: 'continent',
-    isSortable: true
+    isSortable: false
   }];
   var rows = [{
     id: 1,
@@ -367,7 +367,7 @@ var DynamicWithSorting = exports.DynamicWithSorting = function DynamicWithSortin
   }, function (column) {
     return (0, _react2.jsx)(_.Column, {
       minWidth: 155,
-      allowsSorting: true
+      allowsSorting: column.isSortable
     }, column.name);
   }), (0, _react2.jsx)(_.TBody, {
     items: list.items,

package/lib/cjs/components/Tabs/Tabs.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as TabsStories from './Tabs.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={TabsStories} isTemplate />
 
@@ -21,21 +23,14 @@ This component requires the Tab component.
 
 This component should adhere to the [WAI-ARIA Tabs](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) accessibility guidelines. 
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Keys | Function |
-| ---- | ---- |
-| Tab | The field is focusable using the Tab key and follows the page tab sequence. |
-| Arrow keys | When a tab is focused, tabs can be navigated using the left and right arrow keys. |
-| Shift + Tab | Moves focus to the previous focusable component.  |
-| Home(Fn + Right Arrow Key) Or Control/Command + Home| Shifts the focus to the first tab. |
-| End(Fn + Left Arrow Key) Or Control/Command + End | Shifts the focus to the last tab. |
-
-#### Screen Readers
-
-This component uses the following attributes to assist screen readers:
-- The **`aria-orientation`** attribute indicates whether the orientation is horizontal, vertical, unknown, or ambiguous. 
-- Each tab uses the **`aria-selected`** attribute to indicate the selection status, and the **`aria-control`** attribute is supplied with the associated panel ID that displays the content.
-- Each tab uses the **`aria-labelledby`** with the label ID to reference it.
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.tabField,
+  { key: 'Arrow keys', description: 'When a tab is focused, tabs can be navigated using the left and right arrow keys.' },
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: 'Home(Fn + Right Arrow Key) Or Control/Command + Home', description: 'Shifts the focus to the first tab.' },
+  { key: 'End(Fn + Left Arrow Key) Or Control/Command + End', description: 'Shifts the focus to the last tab.' },
+]} screenReaderRows={[
+  ScreenReaderRows.ariaOrientationWithTrailingSpace,
+  'Each tab uses the **`aria-selected`** attribute to indicate the selection status, and the **`aria-control`** attribute is supplied with the associated panel ID that displays the content.',
+  'Each tab uses the **`aria-labelledby`** with the label ID to reference it.',
+]} />

package/lib/cjs/components/TextAreaField/TextAreaField.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as TextAreaFieldStories from './TextAreaField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={TextAreaFieldStories} isTemplate />
 
@@ -21,15 +23,9 @@ This component can be used independently and does not require additional compone
 
 ### Accessibility
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Keys | Functions |
-| ---- | --------- |
-| Tab | The field is focusable using the Tab key and follows the page tab sequence. |
-| Shift + Tab | Moves focus to the previous focusable component. |
-
-#### Screen readers
-
-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.
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.tabField,
+  KeyboardRows.shiftTabFocusPrevious,
+]} screenReaderRows={[
+  ScreenReaderRows.ariaLabelledByInvalidFalse,
+]} />

package/lib/cjs/components/TextField/TextField.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as TextFieldStories from './TextField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={TextFieldStories} isTemplate />
 
@@ -21,15 +23,9 @@ This component can be used independently and does not require additional compone
 
 ### Accessibility
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Keys | Functions |
-| ---- | --------- |
-| Tab | The field is focusable using the Tab key and follows the page tab sequence. |
-| Shift + Tab | Moves focus to the previous focusable component. |
-
-#### Screen readers
-
-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.
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.tabField,
+  KeyboardRows.shiftTabFocusPrevious,
+]} screenReaderRows={[
+  ScreenReaderRows.ariaLabelledByInvalidFalse,
+]} />

package/lib/cjs/components/TimeField/TimeField.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as TimeFieldStories from './TimeField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={TimeFieldStories} isTemplate />
 
@@ -16,21 +18,13 @@ and [useTimeFieldState](https://react-spectrum.adobe.com/react-stately/useTimeFi
 
 This component can be used independently and does not require additional components. 
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component.
-
-| Keys | Functions |
-| ---- | --------- |
-| Tab | Focuses the field and follows the page tab sequence. |
-| Shift + Tab | Moves focus to the previous focusable component. |
-| Up and down Arrow keys | When segments are focused, it increments and decrements time values |
-| Left and right arrows | Moves focus between segments. |
-
-#### Screen Readers
-
-This component uses the following attributes to assist screen readers:
-
-- The **`aria-label`** attribute is used to provide an accessible name.
-- The hidden input, TimeField, and all spin buttons have an **`aria-labelledby`** attribute pointing to the label ID, along with the **`aria-label`** attribute for an accessible name.
-- Each spin button has an **`aria-valuenow`**, **`aria-valuemin`**, and **`aria-valuemax`** to represent the current value, minimum allowed value, and maximum allowed value.
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.tabFocusesField,
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: 'Up and down Arrow keys', description: 'When segments are focused, it increments and decrements time values.' },
+  { key: 'Left and right arrows', description: 'Moves focus between segments.' },
+]} screenReaderRows={[
+  ScreenReaderRows.ariaLabelAccessibleName,
+  'The hidden input, TimeField, and all spin buttons have an **`aria-labelledby`** attribute pointing to the label ID, along with the **`aria-label`** attribute for an accessible name.',
+  'Each spin button has an **`aria-valuenow`**, **`aria-valuemin`**, and **`aria-valuemax`** to represent the current value, minimum allowed value, and maximum allowed value.',
+]} />

package/lib/cjs/components/TooltipTrigger/TooltipTrigger.mdx

@@ -1,5 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as TooltipTriggerStories from './TooltipTrigger.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
 
 <Meta of={TooltipTriggerStories} isTemplate />
 
@@ -19,6 +20,6 @@ This component requires the [Button](./?path=/docs/components-button--default) a
 
 ### Accessibility
 
-#### Screen Readers
-
-The trigger button uses the **`aria-describedby`** attribute with the tooltip container ID to announce the screen reader content when it becomes visible.
+<AccessibilityTable screenReaderRows={[
+  'The trigger button uses the **`aria-describedby`** attribute with the tooltip container ID to announce the screen reader content when it becomes visible.',
+]} />

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/badges.d.ts

@@ -151,5 +151,47 @@ declare const badges: {
             color: string;
         };
     };
+    tableBaseBadge: {
+        active: {
+            backgroundColor: string;
+            '& > span': {
+                color: any;
+                fontSize: string;
+                lineHeight: string;
+            };
+        };
+        warning: {
+            backgroundColor: string;
+            '& > span': {
+                color: any;
+                fontSize: string;
+                lineHeight: string;
+            };
+        };
+        critical: {
+            backgroundColor: string;
+            '& > span': {
+                color: any;
+                fontSize: string;
+                lineHeight: string;
+            };
+        };
+        healthy: {
+            backgroundColor: string;
+            '& > span': {
+                color: any;
+                fontSize: string;
+                lineHeight: string;
+            };
+        };
+        secondary: {
+            backgroundColor: string;
+            '& > span': {
+                color: any;
+                fontSize: string;
+                lineHeight: string;
+            };
+        };
+    };
 };
 export default badges;

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

@@ -110,6 +110,42 @@ var itemBadgeWithSlot = _objectSpread(_objectSpread({}, selectedItemBadge), {},
     }
   }
 });
+var tableBaseBadgeSpanStyle = {
+  fontSize: '11.25px',
+  lineHeight: '1'
+};
+var tableBaseBadge = {
+  active: {
+    backgroundColor: "".concat(_onyxTokens.astroTokensDark.color.blue[500], " !important"),
+    '& > span': _objectSpread(_objectSpread({}, tableBaseBadgeSpanStyle), {}, {
+      color: _onyxTokens.astroTokensDark.color.black
+    })
+  },
+  warning: {
+    backgroundColor: "".concat(_onyxTokens.astroTokensDark.color.yellow[500], " !important"),
+    '& > span': _objectSpread(_objectSpread({}, tableBaseBadgeSpanStyle), {}, {
+      color: _onyxTokens.astroTokensDark.color.black
+    })
+  },
+  critical: {
+    backgroundColor: "".concat(_onyxTokens.astroTokensDark.color.red[500], " !important"),
+    '& > span': _objectSpread(_objectSpread({}, tableBaseBadgeSpanStyle), {}, {
+      color: _onyxTokens.astroTokensDark.color.black
+    })
+  },
+  healthy: {
+    backgroundColor: "".concat(_onyxTokens.astroTokensDark.color.green[500], " !important"),
+    '& > span': _objectSpread(_objectSpread({}, tableBaseBadgeSpanStyle), {}, {
+      color: _onyxTokens.astroTokensDark.color.black
+    })
+  },
+  secondary: {
+    backgroundColor: "".concat(_onyxTokens.astroTokensDark.color.gray[500], " !important"),
+    '& > span': _objectSpread(_objectSpread({}, tableBaseBadgeSpanStyle), {}, {
+      color: _onyxTokens.astroTokensDark.color.black
+    })
+  }
+};
 var badges = {
   baseBadge: baseBadge,
   primary: primary,
@@ -154,6 +190,7 @@ var badges = {
     '& span': {
       color: 'font.base'
     }
-  }
+  },
+  tableBaseBadge: tableBaseBadge
 };
 var _default = exports["default"] = badges;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/cards.d.ts

@@ -25,5 +25,8 @@ declare const cards: {
     activeCard: {
         borderColor: string;
     };
+    tableWrapper: {
+        borderColor: any;
+    };
 };
 export default cards;

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

@@ -5,6 +5,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _onyxTokens = require("@pingux/onyx-tokens");
 var cards = {
   dark: {
     border: '1px solid',
@@ -31,6 +32,9 @@ var cards = {
   },
   activeCard: {
     borderColor: 'border.attachment'
+  },
+  tableWrapper: {
+    borderColor: _onyxTokens.astroTokensDark.color.common.border
   }
 };
 var _default = exports["default"] = cards;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/text.d.ts

@@ -48,6 +48,9 @@ export declare const text: {
     pageHeaderTitle: {
         color: any;
     };
+    headText: {
+        color: any;
+    };
     linkSelectFieldLabel: {
         color: any;
     };

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

@@ -56,6 +56,9 @@ var text = exports.text = {
   pageHeaderTitle: {
     color: _onyxTokens.astroTokensDark.color.gray[100]
   },
+  headText: {
+    color: _onyxTokens.astroTokensDark.color.font.base
+  },
   linkSelectFieldLabel: {
     color: _onyxTokens.astroTokensDark.color.font.link
   },

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.d.ts

@@ -664,18 +664,41 @@ declare const _default: {
             };
         };
         caption: {
-            color: string;
+            color: any;
+            borderBottomColor: any;
         };
         thead: {
+            borderBottomColor: any;
             '&.is-sticky': {
                 boxShadow: string;
             };
         };
+        tbody: {
+            borderTopColor: any;
+        };
+        row: {
+            borderBottomColor: any;
+            '&.is-hovered': {
+                bg: any;
+                '& > td:last-of-type': {
+                    bg: any;
+                };
+            };
+            '&:nth-of-type(odd)': {
+                bg: any;
+                '&.is-hovered': {
+                    bg: any;
+                };
+                '& > td:last-of-type': {
+                    bg: any;
+                };
+            };
+        };
         head: {
-            color: string;
+            color: any;
         };
         data: {
-            color: string;
+            color: any;
         };
         resizer: {
             backgroundColor: any;

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

@@ -7,7 +7,6 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _onyxTokens = require("@pingux/onyx-tokens");
-var _colors = require("../colors");
 var _avatar = require("./avatar");
 var _callout = _interopRequireDefault(require("./callout"));
 var _footer = require("./footer");
@@ -262,18 +261,41 @@ var _default = exports["default"] = {
       }
     },
     caption: {
-      color: 'text.secondary'
+      color: _onyxTokens.astroTokensDark.color.font.base,
+      borderBottomColor: _onyxTokens.astroTokensDark.color.common.border
     },
     thead: {
+      borderBottomColor: _onyxTokens.astroTokensDark.color.common.border,
       '&.is-sticky': {
-        boxShadow: "0 1px 0 ".concat(_colors.colors.border.base)
+        boxShadow: "0 1px 0 ".concat(_onyxTokens.astroTokensDark.color.common.border)
+      }
+    },
+    tbody: {
+      borderTopColor: _onyxTokens.astroTokensDark.color.common.border
+    },
+    row: {
+      borderBottomColor: _onyxTokens.astroTokensDark.color.common.border,
+      '&.is-hovered': {
+        bg: _onyxTokens.astroTokensDark.color['table-row'].hover.bg,
+        '& > td:last-of-type': {
+          bg: _onyxTokens.astroTokensDark.color['table-row'].hover.bg
+        }
+      },
+      '&:nth-of-type(odd)': {
+        bg: _onyxTokens.astroTokensDark.color.common.bg.base,
+        '&.is-hovered': {
+          bg: _onyxTokens.astroTokensDark.color['table-row'].hover.bg
+        },
+        '& > td:last-of-type': {
+          bg: _onyxTokens.astroTokensDark.color.common.bg.base
+        }
       }
     },
     head: {
-      color: 'text.secondary'
+      color: _onyxTokens.astroTokensDark.color.font.base
     },
     data: {
-      color: 'text.secondary'
+      color: _onyxTokens.astroTokensDark.color.font.base
     },
     resizer: {
       backgroundColor: _onyxTokens.astroTokensDark.color.common['border-dark']