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

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SeparatorProps } from '../../types';
+declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLElement>>;
+export default Separator;

package/lib/cjs/components/Separator/Separator.js

@@ -13,7 +13,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../../hooks");
 var _orientation = _interopRequireDefault(require("../../utils/devUtils/constants/orientation"));
 var _Box = _interopRequireDefault(require("../Box/Box"));
@@ -25,7 +24,7 @@ var Separator = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var className = props.className,
     orientation = props.orientation,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var _useSeparator = (0, _reactAria.useSeparator)(props, ref),
+  var _useSeparator = (0, _reactAria.useSeparator)(props),
     separatorProps = _useSeparator.separatorProps;
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
       'is-vertical': orientation === _orientation["default"].VERTICAL,
@@ -36,15 +35,10 @@ var Separator = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: ref,
     className: classNames,
     variant: "separator.base"
-  }, others, separatorProps));
+  }, others, separatorProps, {
+    role: "separator"
+  }));
 });
-Separator.propTypes = {
-  /** Sets horizontal or vertical orientation of the divider. If
-  * vertical orientation is specified, the parent container must have the following styles:
-  * a defined height, flexDirection="row" alignItems="center"
-  */
-  orientation: _propTypes["default"].oneOf(['vertical', 'horizontal'])
-};
 Separator.defaultProps = {
   orientation: 'horizontal'
 };

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+import { SeparatorProps } 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<SeparatorProps>;
+export declare const verticalSeparator: () => React.JSX.Element;

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

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
-var _figmaLinks = require("../../utils/designUtils/figmaLinks.ts");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _Separator = _interopRequireDefault(require("./Separator.mdx"));
 var _react2 = require("@emotion/react");
 var _default = {

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

@@ -0,0 +1,44 @@
+declare const _default: {
+    base: {
+        bg: string;
+        width: string;
+        height: string;
+        my: string;
+        flexShrink: number;
+        '&.is-vertical': {
+            width: string;
+            height: string;
+            mx: string;
+        };
+    };
+    navBarSeparator: {
+        width: string;
+        my: string;
+        mx: string;
+        backgroundColor: string;
+        bg: string;
+        height: string;
+        flexShrink: number;
+        '&.is-vertical': {
+            width: string;
+            height: string;
+            mx: string;
+        };
+    };
+    navBarSubtitleSeparator: {
+        ml: string;
+        width: string;
+        my: string;
+        mx: string;
+        backgroundColor: string;
+        bg: string;
+        height: string;
+        flexShrink: number;
+        '&.is-vertical': {
+            width: string;
+            height: string;
+            mx: string;
+        };
+    };
+};
+export default _default;

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

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

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

@@ -3,29 +3,55 @@
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _orientation = _interopRequireDefault(require("../../utils/devUtils/constants/orientation"));
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
-var _Separator = _interopRequireDefault(require("./Separator"));
+var _ = _interopRequireDefault(require("."));
 var _react2 = require("@emotion/react");
 var testId = 'test-separator';
 var defaultProps = {
-  'data-testid': testId
+  'data-testid': testId,
+  'orientation': 'horizontal'
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_Separator["default"], (0, _extends2["default"])({}, defaultProps, props)));
+  return (0, _testWrapper.render)((0, _react2.jsx)(_["default"], (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)(_Separator["default"], (0, _extends2["default"])({}, defaultProps, props));
+    return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props));
   }
 });
-test('renders Separator component', function () {
-  getComponent();
-  var separator = _testWrapper.screen.getByTestId(testId);
-  _testWrapper.screen.getByRole('separator');
-  expect(separator).toBeInstanceOf(HTMLDivElement);
-  expect(separator).toBeInTheDocument();
+describe('Separator component', function () {
+  test('renders Separator component', function () {
+    getComponent();
+    var separator = _testWrapper.screen.getByTestId(testId);
+    _testWrapper.screen.getByRole('separator');
+    expect(separator).toBeInstanceOf(HTMLDivElement);
+    expect(separator).toBeInTheDocument();
+    expect(separator).toHaveClass('is-horizontal');
+  });
+  test('Separator as a horizontal', function () {
+    getComponent({
+      orientation: 'horizontal'
+    });
+    var separator = _testWrapper.screen.getByTestId(testId);
+    expect(separator).toHaveClass('is-horizontal');
+  });
+  test('Separator vertical orientation', function () {
+    getComponent({
+      orientation: 'vertical'
+    });
+    var separator = _testWrapper.screen.getByTestId(testId);
+    expect(separator).toHaveAttribute('aria-orientation', _orientation["default"].VERTICAL);
+  });
+  test('applies custom className if provided', function () {
+    getComponent({
+      className: 'custom-class'
+    });
+    var separator = _testWrapper.screen.getByTestId(testId);
+    expect(separator).toHaveClass('custom-class');
+  });
 });

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

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

package/lib/cjs/types/index.d.ts

@@ -6,6 +6,7 @@ export * from './item';
 export * from './link';
 export * from './loader';
 export * from './popoverContainer';
+export * from './separator';
 export * from './shared';
 export * from './tableCell';
 export * from './text';

package/lib/cjs/types/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12;
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
@@ -95,8 +95,19 @@ _forEachInstanceProperty(_context8 = _Object$keys(_popoverContainer)).call(_cont
     }
   });
 });
+var _separator = require("./separator");
+_forEachInstanceProperty(_context9 = _Object$keys(_separator)).call(_context9, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _separator[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _separator[key];
+    }
+  });
+});
 var _shared = require("./shared");
-_forEachInstanceProperty(_context9 = _Object$keys(_shared)).call(_context9, function (key) {
+_forEachInstanceProperty(_context10 = _Object$keys(_shared)).call(_context10, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _shared[key]) return;
   _Object$defineProperty(exports, key, {
@@ -107,7 +118,7 @@ _forEachInstanceProperty(_context9 = _Object$keys(_shared)).call(_context9, func
   });
 });
 var _tableCell = require("./tableCell");
-_forEachInstanceProperty(_context10 = _Object$keys(_tableCell)).call(_context10, function (key) {
+_forEachInstanceProperty(_context11 = _Object$keys(_tableCell)).call(_context11, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tableCell[key]) return;
   _Object$defineProperty(exports, key, {
@@ -118,7 +129,7 @@ _forEachInstanceProperty(_context10 = _Object$keys(_tableCell)).call(_context10,
   });
 });
 var _text = require("./text");
-_forEachInstanceProperty(_context11 = _Object$keys(_text)).call(_context11, function (key) {
+_forEachInstanceProperty(_context12 = _Object$keys(_text)).call(_context12, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _text[key]) return;
   _Object$defineProperty(exports, key, {

package/lib/cjs/types/separator.d.ts

@@ -0,0 +1,4 @@
+import { TestingAttributes } from './shared/test';
+import { DOMAttributes, OrientationProps, StyleProps } from './shared';
+export interface SeparatorProps extends StyleProps, DOMAttributes, TestingAttributes, OrientationProps {
+}

package/lib/cjs/types/separator.js

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

package/lib/cjs/types/shared/index.d.ts

@@ -1,4 +1,5 @@
 export * from './dom';
 export * from './events';
+export * from './orientation';
 export * from './style';
 export * from './utils';

package/lib/cjs/types/shared/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4;
+var _context, _context2, _context3, _context4, _context5;
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
@@ -29,8 +29,19 @@ _forEachInstanceProperty(_context2 = _Object$keys(_events)).call(_context2, func
     }
   });
 });
+var _orientation = require("./orientation");
+_forEachInstanceProperty(_context3 = _Object$keys(_orientation)).call(_context3, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _orientation[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _orientation[key];
+    }
+  });
+});
 var _style = require("./style");
-_forEachInstanceProperty(_context3 = _Object$keys(_style)).call(_context3, function (key) {
+_forEachInstanceProperty(_context4 = _Object$keys(_style)).call(_context4, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _style[key]) return;
   _Object$defineProperty(exports, key, {
@@ -41,7 +52,7 @@ _forEachInstanceProperty(_context3 = _Object$keys(_style)).call(_context3, funct
   });
 });
 var _utils = require("./utils");
-_forEachInstanceProperty(_context4 = _Object$keys(_utils)).call(_context4, function (key) {
+_forEachInstanceProperty(_context5 = _Object$keys(_utils)).call(_context5, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _utils[key]) return;
   _Object$defineProperty(exports, key, {

package/lib/cjs/types/shared/orientation.d.ts

@@ -0,0 +1,4 @@
+export interface OrientationProps {
+    /** The orientation of the component. */
+    orientation?: 'vertical' | 'horizontal';
+}

package/lib/cjs/types/shared/orientation.js

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

package/lib/components/Separator/Separator.js

@@ -3,7 +3,6 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["className", "orientation"];
 import React, { forwardRef } from 'react';
 import { useSeparator } from 'react-aria';
-import PropTypes from 'prop-types';
 import { useStatusClasses } from '../../hooks';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
 import Box from '../Box/Box';
@@ -12,7 +11,7 @@ var Separator = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
     orientation = props.orientation,
     others = _objectWithoutProperties(props, _excluded);
-  var _useSeparator = useSeparator(props, ref),
+  var _useSeparator = useSeparator(props),
     separatorProps = _useSeparator.separatorProps;
   var _useStatusClasses = useStatusClasses(className, {
       'is-vertical': orientation === ORIENTATION.VERTICAL,
@@ -23,15 +22,10 @@ var Separator = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: ref,
     className: classNames,
     variant: "separator.base"
-  }, others, separatorProps));
+  }, others, separatorProps, {
+    role: "separator"
+  }));
 });
-Separator.propTypes = {
-  /** Sets horizontal or vertical orientation of the divider. If
-  * vertical orientation is specified, the parent container must have the following styles:
-  * a defined height, flexDirection="row" alignItems="center"
-  */
-  orientation: PropTypes.oneOf(['vertical', 'horizontal'])
-};
 Separator.defaultProps = {
   orientation: 'horizontal'
 };

package/lib/components/Separator/Separator.stories.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Separator } from '../../index';
-import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import SeparatorReadme from './Separator.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {

package/lib/components/Separator/Separator.test.js

@@ -1,12 +1,14 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
+import ORIENTATION from '../../utils/devUtils/constants/orientation';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
-import Separator from './Separator';
+import Separator from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-separator';
 var defaultProps = {
-  'data-testid': testId
+  'data-testid': testId,
+  'orientation': 'horizontal'
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -19,10 +21,34 @@ universalComponentTests({
     return ___EmotionJSX(Separator, _extends({}, defaultProps, props));
   }
 });
-test('renders Separator component', function () {
-  getComponent();
-  var separator = screen.getByTestId(testId);
-  screen.getByRole('separator');
-  expect(separator).toBeInstanceOf(HTMLDivElement);
-  expect(separator).toBeInTheDocument();
+describe('Separator component', function () {
+  test('renders Separator component', function () {
+    getComponent();
+    var separator = screen.getByTestId(testId);
+    screen.getByRole('separator');
+    expect(separator).toBeInstanceOf(HTMLDivElement);
+    expect(separator).toBeInTheDocument();
+    expect(separator).toHaveClass('is-horizontal');
+  });
+  test('Separator as a horizontal', function () {
+    getComponent({
+      orientation: 'horizontal'
+    });
+    var separator = screen.getByTestId(testId);
+    expect(separator).toHaveClass('is-horizontal');
+  });
+  test('Separator vertical orientation', function () {
+    getComponent({
+      orientation: 'vertical'
+    });
+    var separator = screen.getByTestId(testId);
+    expect(separator).toHaveAttribute('aria-orientation', ORIENTATION.VERTICAL);
+  });
+  test('applies custom className if provided', function () {
+    getComponent({
+      className: 'custom-class'
+    });
+    var separator = screen.getByTestId(testId);
+    expect(separator).toHaveClass('custom-class');
+  });
 });

package/lib/types/index.js

@@ -6,6 +6,7 @@ export * from './item';
 export * from './link';
 export * from './loader';
 export * from './popoverContainer';
+export * from './separator';
 export * from './shared';
 export * from './tableCell';
 export * from './text';

package/lib/types/separator.js

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

package/lib/types/shared/index.js

@@ -1,4 +1,5 @@
 export * from './dom';
 export * from './events';
+export * from './orientation';
 export * from './style';
 export * from './utils';

package/lib/types/shared/orientation.js

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

package/package.json

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