@pingux/astro 1.31.0-alpha.1 → 1.31.0-alpha.10

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js

@@ -359,4 +359,83 @@ export var ControlledMenu = function ControlledMenu() {
       bg: "neutral.40"
     }) : null);
   });
+};
+export var RightAlignedChips = function RightAlignedChips(args) {
+  var _useState13 = useState({
+    name: 'Snail',
+    isSandbox: true
+  }),
+      _useState14 = _slicedToArray(_useState13, 2),
+      selectedEnvironment = _useState14[0],
+      setSelectedEnvironment = _useState14[1];
+
+  var envNode = ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Text, {
+    color: "inherit"
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
+    label: "SANDBOX",
+    variant: "boxes.environmentChip",
+    bg: "neutral.40"
+  }) : null);
+
+  var findEnvObj = function findEnvObj(envName) {
+    return _findInstanceProperty(defaultEnvironments).call(defaultEnvironments, function (_ref9) {
+      var name = _ref9.name;
+      return name === envName;
+    });
+  };
+
+  var handleSelectionChange = function handleSelectionChange(newEnvName) {
+    var envObj = findEnvObj(newEnvName);
+    setSelectedEnvironment(_objectSpread({}, envObj));
+  };
+
+  var items = [{
+    name: 'Default'
+  }, {
+    name: 'Kangaroo',
+    isSandbox: true
+  }, {
+    name: 'Snake',
+    isSandbox: true
+  }, {
+    name: 'Snail'
+  }, {
+    name: 'Slug',
+    isSandbox: true
+  }, {
+    name: 'Crow'
+  }, {
+    name: 'Dog'
+  }, {
+    name: 'Crab',
+    isSandbox: true
+  }, {
+    name: 'Fish',
+    isSandbox: true
+  }, {
+    name: 'Turtle',
+    isSandbox: true
+  }, {
+    name: 'Mouse'
+  }];
+  return ___EmotionJSX(EnvironmentBreadcrumb, _extends({}, args, {
+    items: items,
+    name: "Globochem",
+    selectedItem: envNode,
+    onSelectionChange: handleSelectionChange
+  }), function (_ref10) {
+    var name = _ref10.name,
+        isSandbox = _ref10.isSandbox;
+    return ___EmotionJSX(Item, {
+      key: name,
+      textValue: name
+    }, name, isSandbox ? ___EmotionJSX(Chip, {
+      label: "SANDBOX",
+      variant: "boxes.environmentChip",
+      bg: "neutral.40",
+      align: "right"
+    }) : null);
+  });
 };

package/lib/components/ListView/ListView.stories.js

@@ -49,7 +49,8 @@ export default {
 var items = [{
   key: 'Aardvark',
   name: 'Aardvark',
-  id: '1'
+  id: '1',
+  hasSeparator: false
 }, {
   key: 'Kangaroo',
   name: 'Kangaroo',

package/lib/components/ListViewItem/ListViewItem.js

@@ -17,6 +17,7 @@ var ListViewItem = function ListViewItem(props) {
       rowProps = _props$item$props.rowProps,
       _props$item$props$has = _props$item$props.hasSeparator,
       hasSeparator = _props$item$props$has === void 0 ? true : _props$item$props$has,
+      hasInsetSeparator = _props$item$props.hasInsetSeparator,
       className = props.className;
   var dataId = item.props['data-id'];
 
@@ -56,7 +57,8 @@ var ListViewItem = function ListViewItem(props) {
     isHovered: isSelectable && isHovered,
     isSelected: isSelected,
     isFocused: isDisabled ? false : isFocusVisible || isFocusVisibleWithin,
-    hasSeparator: hasSeparator
+    hasSeparator: hasSeparator,
+    hasInsetSeparator: hasInsetSeparator
   }),
       classNames = _useStatusClasses.classNames;
 
@@ -88,7 +90,8 @@ ListViewItem.propTypes = {
       'data-id': PropTypes.string,
       listItemProps: PropTypes.shape({}),
       rowProps: PropTypes.shape({}),
-      hasSeparator: PropTypes.bool
+      hasSeparator: PropTypes.bool,
+      hasInsetSeparator: PropTypes.bool
     })
   })
 };

package/lib/components/OverlayPanel/OverlayPanel.stories.js

@@ -46,7 +46,8 @@ export var Default = function Default(_ref) {
     // readers when an overlay is open.
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Text, null, "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."), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
       ref: triggerRef,
-      onPress: state.open
+      onPress: state.open,
+      "aria-expanded": state.isOpen
     }, "Open Panel"), state.isOpen && ___EmotionJSX(OverlayPanel, _extends({
       isOpen: state.isOpen,
       state: state
@@ -55,7 +56,8 @@ export var Default = function Default(_ref) {
     }), ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
       onPress: function onPress() {
         onClose(state, triggerRef);
-      }
+      },
+      "aria-expanded": state.isOpen
     }, "Close Panel"), ___EmotionJSX(Text, {
       pt: "md"
     }, "Children render here."))))
@@ -123,7 +125,8 @@ export var InnerPanel = function InnerPanel(_ref2) {
       p: '12px'
     }
   }, ___EmotionJSX(Button, {
-    onPress: closeOuterPanel
+    onPress: closeOuterPanel,
+    "aria-expanded": state.isOpen
   }, "Close Panel"), ___EmotionJSX(Text, {
     pt: "md",
     mb: "24px"
@@ -145,14 +148,16 @@ export var InnerPanel = function InnerPanel(_ref2) {
     onPress: toggleMessagesOpen
   }, "Toggle Messages"), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
     ref: innerTriggerRef,
-    onPress: innerState.open
+    onPress: innerState.open,
+    "aria-expanded": innerState.isOpen
   }, "Open Inner Panel"), inner)));
 
   return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
     ___EmotionJSX(React.Fragment, null, ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
       ref: outerTriggerRef,
-      onPress: state.open
+      onPress: state.open,
+      "aria-expanded": state.isOpen
     }, "Open Panel"), outer), messagesOpen && ___EmotionJSX(Messages, {
       sx: {
         zIndex: 11
@@ -173,7 +178,8 @@ export var CustomWidth = function CustomWidth() {
     // readers when an overlay opens.
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Text, null, "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."), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
       ref: triggerRef,
-      onPress: state.open
+      onPress: state.open,
+      "aria-expanded": state.isOpen
     }, "Open Panel"), state.isOpen && ___EmotionJSX(OverlayPanel, {
       isOpen: state.isOpen,
       state: state,
@@ -184,7 +190,8 @@ export var CustomWidth = function CustomWidth() {
     }, ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
       onPress: function onPress() {
         onClose(state, triggerRef);
-      }
+      },
+      "aria-expanded": state.isOpen
     }, "Close Panel"), ___EmotionJSX(Text, {
       pt: "md"
     }, "Children render here."))))

package/lib/components/RequirementsList/RequirementsList.js

@@ -63,18 +63,22 @@ var RequirementsList = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var buildRequirementsLine = function buildRequirementsLine(req) {
     return ___EmotionJSX(Box, {
+      role: "listitem",
       isRow: true,
       key: req.name,
       alignItems: "center",
-      width: "100%"
+      width: "100%",
+      as: "li"
     }, statusIconRender(req.status), ___EmotionJSX(Text, {
       variant: "bodyWeak"
     }, req.name));
   };
 
   return ___EmotionJSX(Box, _extends({
+    role: "list",
     p: "lg",
     gap: "md",
+    as: "ul",
     ref: ref
   }, others), _mapInstanceProperty(requirements).call(requirements, function (req) {
     return buildRequirementsLine(req);

package/lib/components/RequirementsList/RequirementsList.test.js

@@ -51,7 +51,7 @@ axeTest(getComponent);
 test('base case requirements list', function () {
   getComponent();
   var requirementsList = screen.getByTestId(testId);
-  expect(requirementsList).toBeInstanceOf(HTMLDivElement);
+  expect(requirementsList).toBeInstanceOf(HTMLUListElement);
   expect(requirementsList).toBeInTheDocument();
 });
 test('empty variables requirements list', function () {
@@ -59,7 +59,7 @@ test('empty variables requirements list', function () {
     requirementsList: []
   });
   var requirementsList = screen.getByTestId(testId);
-  expect(requirementsList).toBeInstanceOf(HTMLDivElement);
+  expect(requirementsList).toBeInstanceOf(HTMLUListElement);
   expect(requirementsList).toBeInTheDocument();
 });
 test('should render default status icon if such passed in props', function () {

package/lib/components/SearchField/SearchField.js

@@ -69,6 +69,14 @@ var SearchField = /*#__PURE__*/forwardRef(function (props, ref) {
       fieldControlProps = _useField.fieldControlProps,
       fieldLabelProps = _useField.fieldLabelProps;
 
+  var handleKeyDownEvent = function handleKeyDownEvent(e) {
+    var key = e.key;
+
+    if (key === 'Enter' || key === ' ') {
+      state.setValue('');
+    }
+  };
+
   return ___EmotionJSX(Box, fieldContainerProps, label && ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, {
     variant: "forms.search.container"
   }, ___EmotionJSX(Input, _extends({
@@ -80,6 +88,8 @@ var SearchField = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "forms.search.icon",
     size: 22
   }, iconProps)), !hasNoClearButton && state.value !== '' && ___EmotionJSX(IconButton, _extends({
+    tabIndex: 0,
+    onKeyDown: handleKeyDownEvent,
     sx: {
       position: 'absolute',
       top: 8,

package/lib/components/SearchField/SearchField.test.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import axeTest from '../../utils/testUtils/testAxe';
-import { render, screen } from '../../utils/testUtils/testWrapper';
+import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import SearchField from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-radio-group';
@@ -179,6 +179,25 @@ test('clear button should be present by default ', function () {
   });
   expect(screen.getByRole('button')).toBeInTheDocument();
 });
+test('clear button should be keyboard accessible', function () {
+  getComponent();
+  var search = screen.getByLabelText(testLabel);
+  userEvent.type(search, 'clear');
+  expect(search).toHaveValue('clear');
+  var clearButton = screen.getByRole('button');
+  expect(clearButton).toHaveAttribute('tabindex', '0');
+  act(function () {
+    clearButton.focus();
+  });
+  expect(clearButton).toHaveFocus();
+  fireEvent.keyDown(clearButton, {
+    key: 'Enter'
+  });
+  fireEvent.keyUp(clearButton, {
+    key: 'Enter'
+  });
+  expect(search).toHaveValue('');
+});
 test('clear button should not be present is hasNoClearButton=true ', function () {
   getComponent({
     value: 'test-value',

package/lib/components/TabPicker/TabPicker.js

@@ -190,6 +190,7 @@ var TabPicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ref: menuRef
   }, _mapInstanceProperty(items).call(items, function (tab) {
     return ___EmotionJSX(Tab, {
+      role: tab.role,
       key: tab.key
     }, tab.name);
   })));

package/lib/components/Table/Table.stories.js

@@ -6,11 +6,14 @@ import TableBody from '../TableBody';
 import TableRow from '../TableRow';
 import TableCell from '../TableCell';
 import TableHead from '../TableHead';
+import TableCaption from '../TableCaption';
+import { Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Table',
   component: Table
 };
+var caption = 'Populations of Countries';
 var headers = ['Country', 'Population', 'Continent'];
 var objects = [{
   country: 'USA',
@@ -30,33 +33,10 @@ var objects = [{
   continent: 'Europe'
 }];
 export var Default = function Default() {
-  // const headers = [
-  //   'Country', 'Population', 'Continent',
-  // ];
-  //
-  // const objects = [
-  //   {
-  //     country: 'USA',
-  //     population: '320,000,000',
-  //     continent: 'North America',
-  //   },
-  //   {
-  //     country: 'Canada',
-  //     population: '37,000,000',
-  //     continent: 'North America',
-  //   },
-  //   {
-  //     country: 'China',
-  //     population: '1,398,000,000',
-  //     continent: 'Asia',
-  //   },
-  //   {
-  //     country: 'France',
-  //     population: '67,000,000',
-  //     continent: 'Europe',
-  //   },
-  // ];
-  return ___EmotionJSX(Table, null, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
+  return ___EmotionJSX(Table, null, ___EmotionJSX(TableCaption, null, ___EmotionJSX(Text, {
+    fontWeight: 3,
+    fontSize: "lg"
+  }, caption)), ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
     key: "head"
   }, _mapInstanceProperty(headers).call(headers, function (head) {
     return ___EmotionJSX(TableCell, {

package/lib/components/Table/Table.test.js

@@ -7,12 +7,15 @@ import TableBody from '../TableBody';
 import TableRow from '../TableRow';
 import TableCell from '../TableCell';
 import TableHead from '../TableHead';
+import TableCaption from '../TableCaption';
+import { Text } from '../../index';
 import axeTest from '../../utils/testUtils/testAxe';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-table';
 var defaultProps = {
   'data-testid': testId
 };
+var caption = 'Populations of Countries';
 var headers = ['Country', 'Population', 'Continent'];
 var objects = [{
   country: 'USA',
@@ -33,7 +36,10 @@ var objects = [{
 }];
 
 var getComponent = function getComponent() {
-  return render(___EmotionJSX(Table, defaultProps, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
+  return render(___EmotionJSX(Table, defaultProps, ___EmotionJSX(TableCaption, null, ___EmotionJSX(Text, {
+    fontWeight: 3,
+    fontSize: "lg"
+  }, caption)), ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
     key: "head"
   }, _mapInstanceProperty(headers).call(headers, function (head) {
     return ___EmotionJSX(TableCell, {

package/lib/components/TableCaption/TableCaption.js

@@ -0,0 +1,27 @@
+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 '../Box';
+/**
+ * Basic TableCaption component.
+ *
+ * Renders HTML `<caption>`
+ *
+ * Needs to be a child of the `<Table>` component. Accepts text as children.
+ *
+ */
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var TableCaption = function TableCaption(props) {
+  var children = props.children,
+      others = _objectWithoutProperties(props, _excluded);
+
+  return ___EmotionJSX(Box, _extends({
+    variant: "table.tableCaption",
+    as: "caption"
+  }, others), children);
+};
+
+export default TableCaption;

package/lib/components/TableCaption/index.js

@@ -0,0 +1 @@
+export { default } from './TableCaption';

package/lib/components/Tabs/Tabs.stories.js

@@ -235,11 +235,13 @@ export var WithList = function WithList() {
     list: [{
       key: 'tab1list',
       name: 'Tab 1 list',
-      children: 'Tab 1 from list'
+      children: 'Tab 1 from list',
+      role: 'listitem'
     }, {
       key: 'tab2list',
       name: 'Tab 2 list',
-      children: 'Tab 2 from list'
+      children: 'Tab 2 from list',
+      role: 'listitem'
     }]
   }]);
 

package/lib/components/Tabs/Tabs.test.js

@@ -43,11 +43,13 @@ var tabsWithList = [{
   list: [{
     key: 'tab1list',
     name: 'Tab 1 list',
-    children: 'Tab 1 from list'
+    children: 'Tab 1 from list',
+    role: 'listitem'
   }, {
     key: 'tab2list',
     name: 'Tab 2 list',
-    children: 'Tab 2 from list'
+    children: 'Tab 2 from list',
+    role: 'listitem'
   }]
 }];
 var defaultProps = {
@@ -495,7 +497,7 @@ test('will render tab with list if provided', /*#__PURE__*/_asyncToGenerator( /*
           userEvent.click(menuBtn);
           expect(screen.queryByRole('menu')).toBeInTheDocument();
           testTabPanel(0);
-          menuItems = screen.queryAllByRole('menuitemradio');
+          menuItems = screen.queryAllByRole('listitem');
           expect(menuItems).toHaveLength(tabsWithList[1].list.length);
           expect(menuItems[0]).not.toHaveFocus();
           userEvent.click(menuItems[0]);
@@ -538,7 +540,7 @@ test('tab list is accessible via keyboard', function () {
   });
   expect(screen.queryByRole('menu')).toBeInTheDocument();
   testTabPanel(0);
-  var menuItems = screen.queryAllByRole('menuitemradio');
+  var menuItems = screen.queryAllByRole('listitem');
   expect(menuItems).toHaveLength(tabsWithList[1].list.length);
   expect(menuItems[0]).toHaveFocus();
   fireEvent.keyDown(menuItems[0], {