@pingux/astro 1.31.0-alpha.3 → 1.31.0-alpha.5

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

@@ -79,7 +79,8 @@ var Default = function Default(_ref) {
     // readers when an overlay is open.
     (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.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."), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
       ref: triggerRef,
-      onPress: state.open
+      onPress: state.open,
+      "aria-expanded": state.isOpen
     }, "Open Panel"), state.isOpen && (0, _react2.jsx)(_OverlayPanel["default"], (0, _extends2["default"])({
       isOpen: state.isOpen,
       state: state
@@ -88,7 +89,8 @@ var Default = function Default(_ref) {
     }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
       onPress: function onPress() {
         onClose(state, triggerRef);
-      }
+      },
+      "aria-expanded": state.isOpen
     }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
       pt: "md"
     }, "Children render here."))))
@@ -158,7 +160,8 @@ var InnerPanel = function InnerPanel(_ref2) {
       p: '12px'
     }
   }, (0, _react2.jsx)(_index.Button, {
-    onPress: closeOuterPanel
+    onPress: closeOuterPanel,
+    "aria-expanded": state.isOpen
   }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
     pt: "md",
     mb: "24px"
@@ -180,13 +183,15 @@ var InnerPanel = function InnerPanel(_ref2) {
     onPress: toggleMessagesOpen
   }, "Toggle Messages"), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.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.
     (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
       ref: outerTriggerRef,
-      onPress: state.open
+      onPress: state.open,
+      "aria-expanded": state.isOpen
     }, "Open Panel"), outer), messagesOpen && (0, _react2.jsx)(_index.Messages, {
       sx: {
         zIndex: 11
@@ -210,7 +215,8 @@ var CustomWidth = function CustomWidth() {
     // readers when an overlay opens.
     (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.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."), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
       ref: triggerRef,
-      onPress: state.open
+      onPress: state.open,
+      "aria-expanded": state.isOpen
     }, "Open Panel"), state.isOpen && (0, _react2.jsx)(_OverlayPanel["default"], {
       isOpen: state.isOpen,
       state: state,
@@ -221,7 +227,8 @@ var CustomWidth = function CustomWidth() {
     }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
       onPress: function onPress() {
         onClose(state, triggerRef);
-      }
+      },
+      "aria-expanded": state.isOpen
     }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
       pt: "md"
     }, "Children render here."))))

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

@@ -26,6 +26,10 @@ var _TableCell = _interopRequireDefault(require("../TableCell"));
 
 var _TableHead = _interopRequireDefault(require("../TableHead"));
 
+var _TableCaption = _interopRequireDefault(require("../TableCaption"));
+
+var _index = require("../../index");
+
 var _react2 = require("@emotion/react");
 
 var _default = {
@@ -33,6 +37,7 @@ var _default = {
   component: _Table["default"]
 };
 exports["default"] = _default;
+var caption = 'Populations of Countries';
 var headers = ['Country', 'Population', 'Continent'];
 var objects = [{
   country: 'USA',
@@ -53,33 +58,10 @@ var objects = [{
 }];
 
 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 (0, _react2.jsx)(_Table["default"], null, (0, _react2.jsx)(_TableHead["default"], null, (0, _react2.jsx)(_TableRow["default"], {
+  return (0, _react2.jsx)(_Table["default"], null, (0, _react2.jsx)(_TableCaption["default"], null, (0, _react2.jsx)(_index.Text, {
+    fontWeight: 3,
+    fontSize: "lg"
+  }, caption)), (0, _react2.jsx)(_TableHead["default"], null, (0, _react2.jsx)(_TableRow["default"], {
     key: "head"
   }, (0, _map["default"])(headers).call(headers, function (head) {
     return (0, _react2.jsx)(_TableCell["default"], {

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

@@ -20,6 +20,10 @@ var _TableCell = _interopRequireDefault(require("../TableCell"));
 
 var _TableHead = _interopRequireDefault(require("../TableHead"));
 
+var _TableCaption = _interopRequireDefault(require("../TableCaption"));
+
+var _index = require("../../index");
+
 var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 
 var _react3 = require("@emotion/react");
@@ -28,6 +32,7 @@ var testId = 'test-table';
 var defaultProps = {
   'data-testid': testId
 };
+var caption = 'Populations of Countries';
 var headers = ['Country', 'Population', 'Continent'];
 var objects = [{
   country: 'USA',
@@ -48,7 +53,10 @@ var objects = [{
 }];
 
 var getComponent = function getComponent() {
-  return (0, _react2.render)((0, _react3.jsx)(_Table["default"], defaultProps, (0, _react3.jsx)(_TableHead["default"], null, (0, _react3.jsx)(_TableRow["default"], {
+  return (0, _react2.render)((0, _react3.jsx)(_Table["default"], defaultProps, (0, _react3.jsx)(_TableCaption["default"], null, (0, _react3.jsx)(_index.Text, {
+    fontWeight: 3,
+    fontSize: "lg"
+  }, caption)), (0, _react3.jsx)(_TableHead["default"], null, (0, _react3.jsx)(_TableRow["default"], {
     key: "head"
   }, (0, _map["default"])(headers).call(headers, function (head) {
     return (0, _react3.jsx)(_TableCell["default"], {

package/lib/cjs/components/TableCaption/TableCaption.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["children"];
+
+/**
+ * Basic TableCaption component.
+ *
+ * Renders HTML `<caption>`
+ *
+ * Needs to be a child of the `<Table>` component. Accepts text as children.
+ *
+ */
+var TableCaption = function TableCaption(props) {
+  var children = props.children,
+      others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    variant: "table.tableCaption",
+    as: "caption"
+  }, others), children);
+};
+
+var _default = TableCaption;
+exports["default"] = _default;

package/lib/cjs/components/TableCaption/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _TableCaption["default"];
+  }
+});
+
+var _TableCaption = _interopRequireDefault(require("./TableCaption"));

package/lib/cjs/styles/variants/table.js

@@ -57,6 +57,11 @@ var tableRow = {
   width: '100%',
   flexDirection: 'row !important'
 };
+var tableCaption = {
+  textAlign: 'left',
+  marginBottom: 'xs',
+  lineHeight: '21px'
+};
 var table = {
   width: '100%'
 };
@@ -65,6 +70,7 @@ var _default = {
   tableData: tableData,
   tableBody: tableBody,
   tableRow: tableRow,
+  tableCaption: tableCaption,
   table: table
 };
 exports["default"] = _default;

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

@@ -39,6 +39,11 @@ var tableRow = {
   width: '100%',
   flexDirection: 'row !important'
 };
+var tableCaption = {
+  textAlign: 'left',
+  marginBottom: 'xs',
+  lineHeight: '21px'
+};
 var table = {
   width: '100%'
 };
@@ -47,5 +52,6 @@ export default {
   tableData: tableData,
   tableBody: tableBody,
   tableRow: tableRow,
+  tableCaption: tableCaption,
   table: table
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.31.0-alpha.3",
+  "version": "1.31.0-alpha.5",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",