@pingux/astro 2.70.0-alpha.0 → 2.70.0-alpha.2

package/lib/cjs/components/Grid/Grid.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { GridProps } from '../../types';
+export declare const Grid: React.ForwardRefExoticComponent<Omit<GridProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default Grid;

package/lib/cjs/components/Grid/Grid.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Grid = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _themeUi = require("theme-ui");
+var _react2 = require("@emotion/react");
+var Grid = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
+  return (0, _react2.jsx)(_themeUi.Grid, (0, _extends2["default"])({
+    ref: ref
+  }, props));
+});
+exports.Grid = Grid;
+Grid.defaultProps = {
+  repeat: 'fit'
+};
+Grid.displayName = 'Grid';
+var _default = Grid;
+exports["default"] = _default;

package/lib/cjs/components/Grid/Grid.mdx

@@ -0,0 +1,13 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Grid/Grid" />
+
+# Grid
+
+A responsive layout utility component which utilizes [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) to position child elements in a variety of ways. Great for providing mobile-first UI layouts.
+
+Uses the [responsive values](https://theme-ui.com/sx-prop#responsive-values) array syntax and the [Grid from Theme-UI](https://theme-ui.com/components/grid/).
+
+### Required Components
+
+`Grid` should be used to position other components, but there are none that are specifically required. `Box` is used for demonstration below.

package/lib/cjs/components/Grid/Grid.stories.d.ts

@@ -0,0 +1,5 @@
+import { StoryFn } from '@storybook/react';
+import { GridProps } from '../../types';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: StoryFn<GridProps>;

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

@@ -0,0 +1,72 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _index = require("../../index");
+var _Grid = _interopRequireDefault(require("./Grid.mdx"));
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Components/Grid',
+  component: _index.Grid,
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Grid["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    }
+  }
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Text, {
+    mb: "sm",
+    fontStyle: "italic"
+  }, "Minimum width of child elements at responsive breakpoints"), (0, _react2.jsx)(_index.Grid, {
+    width: [128, null, 192]
+  }, (0, _react2.jsx)(_index.Box, {
+    bg: "accent.90"
+  }, "Box"), (0, _react2.jsx)(_index.Box, {
+    bg: "neutral.80"
+  }, "Box"), (0, _react2.jsx)(_index.Box, {
+    bg: "accent.90"
+  }, "Box"), (0, _react2.jsx)(_index.Box, {
+    bg: "neutral.80"
+  }, "Box")), (0, _react2.jsx)(_index.Text, {
+    mt: "xl",
+    mb: "sm",
+    fontStyle: "italic"
+  }, "Defined number of equally-sized columns at responsive breakpoints"), (0, _react2.jsx)(_index.Grid, {
+    gap: 2,
+    columns: [2, null, 4]
+  }, (0, _react2.jsx)(_index.Box, {
+    bg: "accent.90"
+  }, "Box"), (0, _react2.jsx)(_index.Box, {
+    bg: "neutral.80"
+  }, "Box"), (0, _react2.jsx)(_index.Box, {
+    bg: "accent.90"
+  }, "Box"), (0, _react2.jsx)(_index.Box, {
+    bg: "neutral.80"
+  }, "Box")), (0, _react2.jsx)(_index.Text, {
+    mt: "xl",
+    mb: "sm",
+    fontStyle: "italic"
+  }, "Columns using grid syntax sizing at responsive breakpoints"), (0, _react2.jsx)(_index.Grid, {
+    gap: 2,
+    columns: [2, '1fr 2fr']
+  }, (0, _react2.jsx)(_index.Box, {
+    bg: "accent.90"
+  }, "Box"), (0, _react2.jsx)(_index.Box, {
+    bg: "neutral.80"
+  }, "Box"), (0, _react2.jsx)(_index.Box, {
+    bg: "accent.90"
+  }, "Box"), (0, _react2.jsx)(_index.Box, {
+    bg: "neutral.80"
+  }, "Box")));
+};
+exports.Default = Default;

package/lib/cjs/components/Grid/Grid.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/lib/cjs/components/Grid/Grid.styles.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {};
+exports["default"] = _default;

package/lib/cjs/components/Grid/Grid.test.d.ts

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

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

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _index = require("../../index");
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
+var _react2 = require("@emotion/react");
+var defaultProps = {
+  'data-testid': 'grid'
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_index.Grid, (0, _extends2["default"])({}, defaultProps, props)));
+};
+
+// Needs to be added to each components test file
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: function renderComponent(props) {
+    return (0, _react2.jsx)(_index.Grid, (0, _extends2["default"])({}, defaultProps, props));
+  }
+});
+test('renders Grid component', function () {
+  getComponent();
+  expect(_testWrapper.screen.getByTestId('grid')).toBeInTheDocument();
+});

package/lib/cjs/components/Grid/index.d.ts

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

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

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

package/lib/cjs/index.d.ts

@@ -55,6 +55,8 @@ export * from './components/CollapsiblePanelItem';
 export { default as ColorField } from './components/ColorField';
 export { default as ComboBoxField } from './components/ComboBoxField';
 export { default as CopyText } from './components/CopyText';
+export { default as DataTable } from './components/DataTable';
+export * from './components/DataTable';
 export { default as DatePicker } from './components/DatePicker';
 export { default as DateField } from './components/DatePicker/DateField';
 export { default as EditButton } from './components/EditButton';
@@ -62,6 +64,7 @@ export { default as EnvironmentBreadcrumb } from './components/EnvironmentBreadc
 export { default as FieldHelperText } from './components/FieldHelperText';
 export * from './components/FieldHelperText';
 export { default as FileInputField } from './components/FileInputField';
+export { default as Grid } from './components/Grid';
 export { default as HelpHint } from './components/HelpHint';
 export * from './components/HelpHint';
 export { default as Icon } from './components/Icon';
@@ -176,8 +179,6 @@ export { default as TooltipTrigger } from './components/TooltipTrigger';
 export * from './components/TooltipTrigger';
 export { default as TreeView } from './components/TreeView';
 export * from './components/TreeView';
-export { default as DataTable } from './components/DataTable';
-export * from './components/DataTable';
 export * from './types';
 export { OverlayProvider, useOverlayPosition, useOverlayTrigger } from 'react-aria';
 export { Item, Section, useOverlayTriggerState, useTreeData } from 'react-stately';