@pingux/astro 2.20.0-alpha.0 → 2.20.0-alpha.1

package/lib/cjs/{experimental → components}/ButtonBar/ButtonBar.js

@@ -14,23 +14,20 @@ var _index = require("../../index");
 var _react2 = require("@emotion/react");
 var _excluded = ["align", "children"];
 var ButtonBar = function ButtonBar(props) {
-  var _props$align = props.align,
-    align = _props$align === void 0 ? 'left' : _props$align,
+  var align = props.align,
     children = props.children,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     isRow: true,
-    gap: "md",
-    sx: {
-      bg: 'white',
-      px: 'lg',
-      py: 'md',
-      justifyContent: align === 'right' ? 'right' : 'left'
-    }
+    variant: align === 'right' ? 'buttonBar.justifyRightContainer' : 'buttonBar.container'
   }, others), children);
 };
 ButtonBar.propTypes = {
+  /** Justifies the component's children. */
   align: _propTypes["default"].oneOf(['left', 'right'])
 };
+ButtonBar.defaultProps = {
+  align: 'left'
+};
 var _default = ButtonBar;
 exports["default"] = _default;

package/lib/{experimental → cjs/components}/ButtonBar/ButtonBar.mdx

@@ -1,9 +1,8 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Experimental/ButtonBar/ButtonBar" />
+<Meta title="Components/ButtonBar/ButtonBar" />
 
 # ButtonBar
 
 This is a composed component that renders children in a simplified, organized and consistent manner.
 
-If the **align** prop is set to right it will justify the children to the right. Default is left justification.

package/lib/cjs/{experimental → components}/ButtonBar/ButtonBar.stories.js

@@ -8,12 +8,13 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = exports.RightAligned = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
-var _ = require("../..");
+var _index = require("../../index");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _ButtonBar = _interopRequireDefault(require("./ButtonBar.mdx"));
 var _react2 = require("@emotion/react");
 var _default = {
-  title: 'Experimental/ButtonBar',
-  component: _.ButtonBar,
+  title: 'Components/ButtonBar',
+  component: _index.ButtonBar,
   parameters: {
     docs: {
       source: {
@@ -34,13 +35,13 @@ var _default = {
 };
 exports["default"] = _default;
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_.ButtonBar, args, (0, _react2.jsx)(_.Button, {
+  return (0, _react2.jsx)(_index.ButtonBar, args, (0, _react2.jsx)(_index.Button, {
     variant: "primary",
     "data-id": "save-button",
     onPress: function onPress() {
       return alert('Save button pressed');
     }
-  }, "Save"), (0, _react2.jsx)(_.Button, {
+  }, "Save"), (0, _react2.jsx)(_index.Button, {
     variant: "link",
     "data-id": "cancel-button",
     onPress: function onPress() {
@@ -49,16 +50,22 @@ var Default = function Default(args) {
   }, "Cancel"));
 };
 exports.Default = Default;
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.buttonBar["default"]
+  }
+};
 var RightAligned = function RightAligned() {
-  return (0, _react2.jsx)(_.ButtonBar, {
+  return (0, _react2.jsx)(_index.ButtonBar, {
     align: "right"
-  }, (0, _react2.jsx)(_.Button, {
+  }, (0, _react2.jsx)(_index.Button, {
     variant: "primary",
     "data-id": "next-button",
     onPress: function onPress() {
       return alert('Next button pressed');
     }
-  }, "Next"), (0, _react2.jsx)(_.Button, {
+  }, "Next"), (0, _react2.jsx)(_index.Button, {
     variant: "link",
     "data-id": "cancel-button",
     onPress: function onPress() {
@@ -66,4 +73,10 @@ var RightAligned = function RightAligned() {
     }
   }, "Cancel"));
 };
-exports.RightAligned = RightAligned;
+exports.RightAligned = RightAligned;
+RightAligned.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.buttonBar.rightAligned
+  }
+};

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

@@ -0,0 +1,33 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+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"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var container = {
+  bg: 'white',
+  gap: 'md',
+  justifyContent: 'left',
+  px: 'lg',
+  py: 'md'
+};
+var justifyRightContainer = _objectSpread(_objectSpread({}, container), {}, {
+  justifyContent: 'right'
+});
+var _default = {
+  container: container,
+  justifyRightContainer: justifyRightContainer
+};
+exports["default"] = _default;

package/lib/cjs/{experimental → components}/ButtonBar/ButtonBar.test.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
-var _ = require("../..");
+var _index = require("../../index");
 var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _react2 = require("@emotion/react");
@@ -13,13 +13,13 @@ var defaultProps = {
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_.ButtonBar, (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_.Button, {
+  return (0, _testWrapper.render)((0, _react2.jsx)(_index.ButtonBar, (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_index.Button, {
     variant: "primary",
     "data-id": "save-button",
     onPress: function onPress() {
       return alert('Save button pressed');
     }
-  }, "Save"), (0, _react2.jsx)(_.Button, {
+  }, "Save"), (0, _react2.jsx)(_index.Button, {
     variant: "link",
     "data-id": "cancel-button",
     onPress: function onPress() {
@@ -29,11 +29,11 @@ var getComponent = function getComponent() {
 };
 var getComponentCustomChildren = function getComponentCustomChildren() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_.ButtonBar, (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)("button", null, "custom text"), (0, _react2.jsx)("button", null, "Also custom text")));
+  return (0, _testWrapper.render)((0, _react2.jsx)(_index.ButtonBar, (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)("button", null, "custom text"), (0, _react2.jsx)("button", null, "Also custom text")));
 };
 var getComponentTextChildren = function getComponentTextChildren() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_.ButtonBar, props, "custom text"));
+  return (0, _testWrapper.render)((0, _react2.jsx)(_index.ButtonBar, props, "custom text"));
 };
 (0, _testAxe["default"])(getComponent);
 afterEach(function () {

package/lib/cjs/index.d.ts

@@ -22,6 +22,7 @@ export { default as Breadcrumbs } from './components/Breadcrumbs';
 export * from './components/Breadcrumbs';
 export { default as Button } from './components/Button';
 export * from './components/Button';
+export { default as ButtonBar } from './components/ButtonBar/ButtonBar';
 export { default as Calendar } from './components/Calendar';
 export * from './components/Calendar';
 export { default as CalendarCell } from './components/Calendar/CalendarCell';
@@ -166,7 +167,6 @@ export * from './types';
 export { OverlayProvider, useOverlayPosition, useOverlayTrigger } from 'react-aria';
 export { Item, Section, useOverlayTriggerState } from 'react-stately';
 export { TableBody as DataTableBody, Cell as DataTableCell, Column as DataTableColumn, TableHeader as DataTableHeader, Row as DataTableRow, } from 'react-stately';
-export { default as ButtonBar } from './experimental/ButtonBar/ButtonBar';
 export { default as EditButton } from './experimental/EditButton';
 export { default as PanelHeader } from './experimental/PanelHeader';
 export { default as PanelHeaderCloseButton } from './experimental/PanelHeader/controls/PanelHeaderCloseButton';

package/lib/cjs/index.js

@@ -24,6 +24,7 @@ var _exportNames = {
   Bracket: true,
   Breadcrumbs: true,
   Button: true,
+  ButtonBar: true,
   Calendar: true,
   CalendarCell: true,
   CalendarGrid: true,
@@ -115,7 +116,6 @@ var _exportNames = {
   DataTableColumn: true,
   DataTableHeader: true,
   DataTableRow: true,
-  ButtonBar: true,
   EditButton: true,
   PanelHeader: true,
   PanelHeaderCloseButton: true,
@@ -920,6 +920,7 @@ _forEachInstanceProperty(_context12 = _Object$keys(_Button)).call(_context12, fu
     }
   });
 });
+var _ButtonBar = _interopRequireDefault(require("./components/ButtonBar/ButtonBar"));
 var _Calendar = _interopRequireWildcard(require("./components/Calendar"));
 _forEachInstanceProperty(_context13 = _Object$keys(_Calendar)).call(_context13, function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1683,7 +1684,6 @@ _forEachInstanceProperty(_context74 = _Object$keys(_types)).call(_context74, fun
 });
 var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
-var _ButtonBar = _interopRequireDefault(require("./experimental/ButtonBar/ButtonBar"));
 var _EditButton = _interopRequireDefault(require("./experimental/EditButton"));
 var _PanelHeader = _interopRequireDefault(require("./experimental/PanelHeader"));
 var _PanelHeaderCloseButton = _interopRequireDefault(require("./experimental/PanelHeader/controls/PanelHeaderCloseButton"));

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

@@ -21,6 +21,7 @@ var _Accordion = _interopRequireDefault(require("../../components/AccordionGroup
 var _Box = _interopRequireDefault(require("../../components/Box/Box.styles"));
 var _Bracket = _interopRequireDefault(require("../../components/Bracket/Bracket.styles"));
 var _Breadcrumb = _interopRequireDefault(require("../../components/Breadcrumbs/Breadcrumb.styles"));
+var _ButtonBar = _interopRequireDefault(require("../../components/ButtonBar/ButtonBar.styles"));
 var _Calendar = _interopRequireDefault(require("../../components/Calendar/Calendar.styles"));
 var _Callout = _interopRequireDefault(require("../../components/Callout/Callout.styles"));
 var _CodeView = _interopRequireDefault(require("../../components/CodeView/CodeView.styles"));
@@ -62,6 +63,7 @@ var _default = _objectSpread({
   box: _Box["default"],
   bracket: _Bracket["default"],
   breadcrumb: _Breadcrumb["default"],
+  buttonBar: _ButtonBar["default"],
   calendar: _Calendar["default"],
   callout: _Callout["default"],
   codeView: _CodeView["default"],

package/lib/cjs/utils/designUtils/figmaLinks.js

@@ -24,6 +24,10 @@ var FIGMA_LINKS = {
   button: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=0-1&t=8Wwd3tIBh3GEjCJB-0'
   },
+  buttonBar: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=3660%3A20551&mode=dev',
+    rightAligned: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=3660%3A20657&mode=dev'
+  },
   calendar: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=6373%3A25490&t=BoHXzVpQq9Lf7MaU-1'
   },

package/lib/{experimental → components}/ButtonBar/ButtonBar.js

@@ -6,22 +6,19 @@ import PropTypes from 'prop-types';
 import { Box } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ButtonBar = function ButtonBar(props) {
-  var _props$align = props.align,
-    align = _props$align === void 0 ? 'left' : _props$align,
+  var align = props.align,
     children = props.children,
     others = _objectWithoutProperties(props, _excluded);
   return ___EmotionJSX(Box, _extends({
     isRow: true,
-    gap: "md",
-    sx: {
-      bg: 'white',
-      px: 'lg',
-      py: 'md',
-      justifyContent: align === 'right' ? 'right' : 'left'
-    }
+    variant: align === 'right' ? 'buttonBar.justifyRightContainer' : 'buttonBar.container'
   }, others), children);
 };
 ButtonBar.propTypes = {
+  /** Justifies the component's children. */
   align: PropTypes.oneOf(['left', 'right'])
 };
+ButtonBar.defaultProps = {
+  align: 'left'
+};
 export default ButtonBar;

package/lib/{cjs/experimental → components}/ButtonBar/ButtonBar.mdx

@@ -1,9 +1,8 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Experimental/ButtonBar/ButtonBar" />
+<Meta title="Components/ButtonBar/ButtonBar" />
 
 # ButtonBar
 
 This is a composed component that renders children in a simplified, organized and consistent manner.
 
-If the **align** prop is set to right it will justify the children to the right. Default is left justification.

package/lib/{experimental → components}/ButtonBar/ButtonBar.stories.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Button, ButtonBar } from '../..';
+import { Button, ButtonBar } from '../../index';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import ButtonBarReadme from './ButtonBar.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Experimental/ButtonBar',
+  title: 'Components/ButtonBar',
   component: ButtonBar,
   parameters: {
     docs: {
@@ -39,6 +40,12 @@ export var Default = function Default(args) {
     }
   }, "Cancel"));
 };
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.buttonBar["default"]
+  }
+};
 export var RightAligned = function RightAligned() {
   return ___EmotionJSX(ButtonBar, {
     align: "right"
@@ -55,4 +62,10 @@ export var RightAligned = function RightAligned() {
       return alert('Cancel button pressed');
     }
   }, "Cancel"));
+};
+RightAligned.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.buttonBar.rightAligned
+  }
 };

package/lib/components/ButtonBar/ButtonBar.styles.js

@@ -0,0 +1,25 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var container = {
+  bg: 'white',
+  gap: 'md',
+  justifyContent: 'left',
+  px: 'lg',
+  py: 'md'
+};
+var justifyRightContainer = _objectSpread(_objectSpread({}, container), {}, {
+  justifyContent: 'right'
+});
+export default {
+  container: container,
+  justifyRightContainer: justifyRightContainer
+};

package/lib/{experimental → components}/ButtonBar/ButtonBar.test.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import { Button, ButtonBar } from '../..';
+import { Button, ButtonBar } from '../../index';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import { jsx as ___EmotionJSX } from "@emotion/react";

package/lib/index.js

@@ -26,6 +26,7 @@ export { default as Breadcrumbs } from './components/Breadcrumbs';
 export * from './components/Breadcrumbs';
 export { default as Button } from './components/Button';
 export * from './components/Button';
+export { default as ButtonBar } from './components/ButtonBar/ButtonBar';
 export { default as Calendar } from './components/Calendar';
 export * from './components/Calendar';
 export { default as CalendarCell } from './components/Calendar/CalendarCell';
@@ -175,7 +176,6 @@ export { Item, Section, useOverlayTriggerState } from 'react-stately';
 export { TableBody as DataTableBody, Cell as DataTableCell, Column as DataTableColumn, TableHeader as DataTableHeader, Row as DataTableRow } from 'react-stately';
 
 // Experimental
-export { default as ButtonBar } from './experimental/ButtonBar/ButtonBar';
 export { default as EditButton } from './experimental/EditButton';
 export { default as PanelHeader } from './experimental/PanelHeader';
 export { default as PanelHeaderCloseButton } from './experimental/PanelHeader/controls/PanelHeaderCloseButton';

package/lib/styles/variants/variants.js

@@ -14,6 +14,7 @@ import accordion from '../../components/AccordionGroup/Accordion.styles';
 import box from '../../components/Box/Box.styles';
 import bracket from '../../components/Bracket/Bracket.styles';
 import breadcrumb from '../../components/Breadcrumbs/Breadcrumb.styles';
+import buttonBar from '../../components/ButtonBar/ButtonBar.styles';
 import calendar from '../../components/Calendar/Calendar.styles';
 import callout from '../../components/Callout/Callout.styles';
 import codeView from '../../components/CodeView/CodeView.styles';
@@ -51,6 +52,7 @@ export default _objectSpread({
   box: box,
   bracket: bracket,
   breadcrumb: breadcrumb,
+  buttonBar: buttonBar,
   calendar: calendar,
   callout: callout,
   codeView: codeView,

package/lib/utils/designUtils/figmaLinks.js

@@ -17,6 +17,10 @@ export var FIGMA_LINKS = {
   button: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=0-1&t=8Wwd3tIBh3GEjCJB-0'
   },
+  buttonBar: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=3660%3A20551&mode=dev',
+    rightAligned: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=3660%3A20657&mode=dev'
+  },
   calendar: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=6373%3A25490&t=BoHXzVpQq9Lf7MaU-1'
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.20.0-alpha.0",
+  "version": "2.20.0-alpha.1",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",