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

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/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.4",
+  "version": "1.31.0-alpha.5",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",