@pingux/astro 2.22.0-alpha.3 → 2.23.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -14,7 +14,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
14
14
  var _react = _interopRequireWildcard(require("react"));
15
15
  var _PlusIcon = _interopRequireDefault(require("@pingux/mdi-react/PlusIcon"));
16
16
  var _propTypes = _interopRequireDefault(require("prop-types"));
17
- var _ = require("../..");
17
+ var _index = require("../../index");
18
18
  var _react2 = require("@emotion/react");
19
19
  var _excluded = ["buttonProps", "children", "title"];
20
20
  function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -24,50 +24,34 @@ var PageHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
24
24
  children = _ref.children,
25
25
  title = _ref.title,
26
26
  other = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
27
- var sx = {
28
- wrapper: {
29
- align: 'center',
30
- mb: 'xs'
31
- },
32
- titleText: {
33
- fontSize: 'xx',
34
- fontWeight: '3',
35
- fontColor: 'text.primary'
36
- },
37
- description: {
38
- fontSize: 'sm',
39
- color: 'text.secondary',
40
- fontWeight: '0',
41
- width: '800px',
42
- ' > a': {
43
- fontSize: 'sm'
44
- }
27
+ var linkStyles = {
28
+ ' > a': {
29
+ fontSize: 'sm'
45
30
  }
46
31
  };
47
- var renderButton = buttonProps && (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({
32
+ var renderButton = buttonProps && (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({
48
33
  "aria-label": "icon button",
49
34
  ml: "sm",
50
35
  variant: "inverted"
51
- }, buttonProps), (0, _react2.jsx)(_.Icon, {
36
+ }, buttonProps), (0, _react2.jsx)(_index.Icon, {
52
37
  icon: _PlusIcon["default"],
53
38
  size: "sm"
54
39
  }));
55
- return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
56
- isRow: true,
57
- sx: sx.wrapper,
58
- role: "heading",
59
- "aria-level": "1"
60
- }, other, {
40
+ return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
61
41
  ref: ref
62
- }), (0, _react2.jsx)(_.Text, {
63
- sx: sx.titleText,
64
- as: "h1"
65
- }, title), renderButton), (0, _react2.jsx)(_.Text, {
66
- sx: sx.description
42
+ }, other), (0, _react2.jsx)(_index.Box, {
43
+ isRow: true,
44
+ mb: "xs"
45
+ }, (0, _react2.jsx)(_index.Text, {
46
+ as: "h1",
47
+ variant: "H1"
48
+ }, title), renderButton), (0, _react2.jsx)(_index.Text, {
49
+ variant: "bodyWeak",
50
+ sx: linkStyles
67
51
  }, children));
68
52
  });
69
53
  PageHeader.propTypes = {
70
- /** If present, this string will render at the top of the section */
54
+ /** If present, this string will be rendered as the title */
71
55
  title: _propTypes["default"].string,
72
56
  /** Props object that is spread into the Button element. */
73
57
  buttonProps: _propTypes["default"].shape({})
@@ -0,0 +1,18 @@
1
+ import { Meta } from '@storybook/addon-docs';
2
+
3
+ <Meta title="Components/PageHeader" />
4
+
5
+ # PageHeader
6
+
7
+ The PageHeader component allows for easy creation of page header content. It comes with pre-defined styles that match Ping specs.
8
+
9
+ ### Recommended Use
10
+ The PageHeader is intended to be used at the top of a page.
11
+
12
+ Pass `buttonProps` to add actions and customizations to the '+' button. Omit `buttonProps` if the '+' button is not needed.
13
+
14
+ ### Children
15
+ Text and Links passed as children will be styled to match Ping specs.
16
+
17
+ ### Note:
18
+ Components styled to match design specs may be updated over time as design specs change. Be aware that styles within this component may undergo minor adjustments over time to stay in sync with the latest design specifications.
@@ -8,13 +8,18 @@ _Object$defineProperty(exports, "__esModule", {
8
8
  exports["default"] = exports.WithoutLink = exports.WithoutButton = exports.WithButtonProps = exports.Default = void 0;
9
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
10
10
  var _react = _interopRequireDefault(require("react"));
11
- var _ = require("../..");
11
+ var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
12
+ var _index = require("../../index");
13
+ var _PageHeader = _interopRequireDefault(require("./PageHeader.mdx"));
12
14
  var _react2 = require("@emotion/react");
13
15
  var _default = {
14
- title: 'Experimental/PageHeader',
15
- component: _.PageHeader,
16
+ title: 'Components/PageHeader',
17
+ component: _index.PageHeader,
16
18
  parameters: {
17
19
  docs: {
20
+ page: function page() {
21
+ return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_PageHeader["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
22
+ },
18
23
  source: {
19
24
  type: 'code'
20
25
  }
@@ -31,26 +36,26 @@ var _default = {
31
36
  exports["default"] = _default;
32
37
  var description = "The description of the page. The description of the page. The description of the page. The\n description of the page.The description of the page. The description of the page. The\n description of the page. The description of the page. The description of the page. ";
33
38
  var Default = function Default(args) {
34
- return (0, _react2.jsx)(_.PageHeader, (0, _extends2["default"])({
39
+ return (0, _react2.jsx)(_index.PageHeader, (0, _extends2["default"])({
35
40
  buttonProps: {
36
41
  onPress: function onPress() {}
37
42
  },
38
43
  title: "Title of the Page"
39
- }, args), description, (0, _react2.jsx)(_.Link, {
44
+ }, args), description, (0, _react2.jsx)(_index.Link, {
40
45
  href: "https://uilibrary.ping-eng.com/"
41
46
  }, "Learn more"));
42
47
  };
43
48
  exports.Default = Default;
44
49
  var WithoutButton = function WithoutButton() {
45
- return (0, _react2.jsx)(_.PageHeader, {
50
+ return (0, _react2.jsx)(_index.PageHeader, {
46
51
  title: "Title of the Page"
47
- }, description, (0, _react2.jsx)(_.Link, {
52
+ }, description, (0, _react2.jsx)(_index.Link, {
48
53
  href: "https://uilibrary.ping-eng.com/"
49
54
  }, "Learn more"));
50
55
  };
51
56
  exports.WithoutButton = WithoutButton;
52
57
  var WithoutLink = function WithoutLink() {
53
- return (0, _react2.jsx)(_.PageHeader, {
58
+ return (0, _react2.jsx)(_index.PageHeader, {
54
59
  buttonProps: {
55
60
  onPress: function onPress() {}
56
61
  },
@@ -59,12 +64,12 @@ var WithoutLink = function WithoutLink() {
59
64
  };
60
65
  exports.WithoutLink = WithoutLink;
61
66
  var WithButtonProps = function WithButtonProps() {
62
- return (0, _react2.jsx)(_.PageHeader, {
67
+ return (0, _react2.jsx)(_index.PageHeader, {
63
68
  buttonProps: {
64
69
  bg: 'critical.bright'
65
70
  },
66
71
  title: "Title of the Page"
67
- }, description, (0, _react2.jsx)(_.Link, {
72
+ }, description, (0, _react2.jsx)(_index.Link, {
68
73
  href: "https://uilibrary.ping-eng.com/"
69
74
  }, "Learn more"));
70
75
  };
@@ -102,6 +102,7 @@ export { default as NumberField } from './components/NumberField';
102
102
  export * from './components/NumberField';
103
103
  export { default as OverlayPanel } from './components/OverlayPanel';
104
104
  export * from './components/OverlayPanel';
105
+ export { default as PageHeader } from './components/PageHeader';
105
106
  export { default as PanelHeader } from './components/PanelHeader';
106
107
  export { default as PanelHeaderCloseButton } from './components/PanelHeader/controls/PanelHeaderCloseButton';
107
108
  export { default as PanelHeaderMenu } from './components/PanelHeader/controls/PanelHeaderMenu';
@@ -166,8 +167,6 @@ export { default as TooltipTrigger } from './components/TooltipTrigger';
166
167
  export * from './components/TooltipTrigger';
167
168
  export { default as TreeView } from './components/TreeView';
168
169
  export * from './components/TreeView';
169
- export { default as PageHeader } from './experimental/PageHeader';
170
- export * from './experimental/PageHeader';
171
170
  export { default as DataTable } from './components/DataTable';
172
171
  export * from './components/DataTable';
173
172
  export * from './types';
package/lib/cjs/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
 
3
- var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62, _context63, _context64, _context65, _context66, _context67, _context68, _context69, _context70, _context71, _context72, _context73, _context74, _context75;
3
+ var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62, _context63, _context64, _context65, _context66, _context67, _context68, _context69, _context70, _context71, _context72, _context73, _context74;
4
4
  var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
5
5
  var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
6
6
  var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
@@ -73,6 +73,7 @@ var _exportNames = {
73
73
  NavBarSection: true,
74
74
  NumberField: true,
75
75
  OverlayPanel: true,
76
+ PageHeader: true,
76
77
  PanelHeader: true,
77
78
  PanelHeaderCloseButton: true,
78
79
  PanelHeaderMenu: true,
@@ -109,7 +110,6 @@ var _exportNames = {
109
110
  TimeZonePicker: true,
110
111
  TooltipTrigger: true,
111
112
  TreeView: true,
112
- PageHeader: true,
113
113
  DataTable: true,
114
114
  OverlayProvider: true,
115
115
  useOverlayPosition: true,
@@ -1323,6 +1323,7 @@ _forEachInstanceProperty(_context43 = _Object$keys(_OverlayPanel)).call(_context
1323
1323
  }
1324
1324
  });
1325
1325
  });
1326
+ var _PageHeader = _interopRequireDefault(require("./components/PageHeader"));
1326
1327
  var _PanelHeader = _interopRequireDefault(require("./components/PanelHeader"));
1327
1328
  var _PanelHeaderCloseButton = _interopRequireDefault(require("./components/PanelHeader/controls/PanelHeaderCloseButton"));
1328
1329
  var _PanelHeaderMenu = _interopRequireDefault(require("./components/PanelHeader/controls/PanelHeaderMenu"));
@@ -1677,20 +1678,8 @@ _forEachInstanceProperty(_context72 = _Object$keys(_TreeView)).call(_context72,
1677
1678
  }
1678
1679
  });
1679
1680
  });
1680
- var _PageHeader = _interopRequireWildcard(require("./experimental/PageHeader"));
1681
- _forEachInstanceProperty(_context73 = _Object$keys(_PageHeader)).call(_context73, function (key) {
1682
- if (key === "default" || key === "__esModule") return;
1683
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
1684
- if (key in exports && exports[key] === _PageHeader[key]) return;
1685
- _Object$defineProperty(exports, key, {
1686
- enumerable: true,
1687
- get: function get() {
1688
- return _PageHeader[key];
1689
- }
1690
- });
1691
- });
1692
1681
  var _DataTable = _interopRequireWildcard(require("./components/DataTable"));
1693
- _forEachInstanceProperty(_context74 = _Object$keys(_DataTable)).call(_context74, function (key) {
1682
+ _forEachInstanceProperty(_context73 = _Object$keys(_DataTable)).call(_context73, function (key) {
1694
1683
  if (key === "default" || key === "__esModule") return;
1695
1684
  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
1696
1685
  if (key in exports && exports[key] === _DataTable[key]) return;
@@ -1702,7 +1691,7 @@ _forEachInstanceProperty(_context74 = _Object$keys(_DataTable)).call(_context74,
1702
1691
  });
1703
1692
  });
1704
1693
  var _types = require("./types");
1705
- _forEachInstanceProperty(_context75 = _Object$keys(_types)).call(_context75, function (key) {
1694
+ _forEachInstanceProperty(_context74 = _Object$keys(_types)).call(_context74, function (key) {
1706
1695
  if (key === "default" || key === "__esModule") return;
1707
1696
  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
1708
1697
  if (key in exports && exports[key] === _types[key]) return;
@@ -4,31 +4,16 @@ var _excluded = ["buttonProps", "children", "title"];
4
4
  import React, { forwardRef } from 'react';
5
5
  import PlusIcon from '@pingux/mdi-react/PlusIcon';
6
6
  import PropTypes from 'prop-types';
7
- import { Box, Icon, IconButton, Text } from '../..';
7
+ import { Box, Icon, IconButton, Text } from '../../index';
8
8
  import { jsx as ___EmotionJSX } from "@emotion/react";
9
9
  var PageHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
10
10
  var buttonProps = _ref.buttonProps,
11
11
  children = _ref.children,
12
12
  title = _ref.title,
13
13
  other = _objectWithoutProperties(_ref, _excluded);
14
- var sx = {
15
- wrapper: {
16
- align: 'center',
17
- mb: 'xs'
18
- },
19
- titleText: {
20
- fontSize: 'xx',
21
- fontWeight: '3',
22
- fontColor: 'text.primary'
23
- },
24
- description: {
25
- fontSize: 'sm',
26
- color: 'text.secondary',
27
- fontWeight: '0',
28
- width: '800px',
29
- ' > a': {
30
- fontSize: 'sm'
31
- }
14
+ var linkStyles = {
15
+ ' > a': {
16
+ fontSize: 'sm'
32
17
  }
33
18
  };
34
19
  var renderButton = buttonProps && ___EmotionJSX(IconButton, _extends({
@@ -39,22 +24,21 @@ var PageHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
39
24
  icon: PlusIcon,
40
25
  size: "sm"
41
26
  }));
42
- return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, _extends({
43
- isRow: true,
44
- sx: sx.wrapper,
45
- role: "heading",
46
- "aria-level": "1"
47
- }, other, {
27
+ return ___EmotionJSX(Box, _extends({
48
28
  ref: ref
49
- }), ___EmotionJSX(Text, {
50
- sx: sx.titleText,
51
- as: "h1"
29
+ }, other), ___EmotionJSX(Box, {
30
+ isRow: true,
31
+ mb: "xs"
32
+ }, ___EmotionJSX(Text, {
33
+ as: "h1",
34
+ variant: "H1"
52
35
  }, title), renderButton), ___EmotionJSX(Text, {
53
- sx: sx.description
36
+ variant: "bodyWeak",
37
+ sx: linkStyles
54
38
  }, children));
55
39
  });
56
40
  PageHeader.propTypes = {
57
- /** If present, this string will render at the top of the section */
41
+ /** If present, this string will be rendered as the title */
58
42
  title: PropTypes.string,
59
43
  /** Props object that is spread into the Button element. */
60
44
  buttonProps: PropTypes.shape({})
@@ -0,0 +1,18 @@
1
+ import { Meta } from '@storybook/addon-docs';
2
+
3
+ <Meta title="Components/PageHeader" />
4
+
5
+ # PageHeader
6
+
7
+ The PageHeader component allows for easy creation of page header content. It comes with pre-defined styles that match Ping specs.
8
+
9
+ ### Recommended Use
10
+ The PageHeader is intended to be used at the top of a page.
11
+
12
+ Pass `buttonProps` to add actions and customizations to the '+' button. Omit `buttonProps` if the '+' button is not needed.
13
+
14
+ ### Children
15
+ Text and Links passed as children will be styled to match Ping specs.
16
+
17
+ ### Note:
18
+ Components styled to match design specs may be updated over time as design specs change. Be aware that styles within this component may undergo minor adjustments over time to stay in sync with the latest design specifications.
@@ -1,12 +1,17 @@
1
1
  import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
2
2
  import React from 'react';
3
- import { Link, PageHeader } from '../..';
3
+ import DocsLayout from '../../../.storybook/storybookDocsLayout';
4
+ import { Link, PageHeader } from '../../index';
5
+ import PageHeaderReadMe from './PageHeader.mdx';
4
6
  import { jsx as ___EmotionJSX } from "@emotion/react";
5
7
  export default {
6
- title: 'Experimental/PageHeader',
8
+ title: 'Components/PageHeader',
7
9
  component: PageHeader,
8
10
  parameters: {
9
11
  docs: {
12
+ page: function page() {
13
+ return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(PageHeaderReadMe, null), ___EmotionJSX(DocsLayout, null));
14
+ },
10
15
  source: {
11
16
  type: 'code'
12
17
  }
package/lib/index.js CHANGED
@@ -106,6 +106,7 @@ export { default as NumberField } from './components/NumberField';
106
106
  export * from './components/NumberField';
107
107
  export { default as OverlayPanel } from './components/OverlayPanel';
108
108
  export * from './components/OverlayPanel';
109
+ export { default as PageHeader } from './components/PageHeader';
109
110
  export { default as PanelHeader } from './components/PanelHeader';
110
111
  export { default as PanelHeaderCloseButton } from './components/PanelHeader/controls/PanelHeaderCloseButton';
111
112
  export { default as PanelHeaderMenu } from './components/PanelHeader/controls/PanelHeaderMenu';
@@ -170,8 +171,6 @@ export { default as TooltipTrigger } from './components/TooltipTrigger';
170
171
  export * from './components/TooltipTrigger';
171
172
  export { default as TreeView } from './components/TreeView';
172
173
  export * from './components/TreeView';
173
- export { default as PageHeader } from './experimental/PageHeader';
174
- export * from './experimental/PageHeader';
175
174
 
176
175
  /* eslint-enable import/export */
177
176
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.22.0-alpha.3",
3
+ "version": "2.23.0-alpha.0",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",
@@ -1,51 +0,0 @@
1
- "use strict";
2
-
3
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
4
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
5
- _Object$defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = exports.Default = void 0;
9
- var _react = _interopRequireDefault(require("react"));
10
- var _PlusIcon = _interopRequireDefault(require("@pingux/mdi-react/PlusIcon"));
11
- var _index = require("../index");
12
- var _react2 = require("@emotion/react");
13
- var _default = {
14
- title: 'Recipes/Page Header'
15
- };
16
- exports["default"] = _default;
17
- var Default = function Default() {
18
- return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
19
- align: "center",
20
- isRow: true,
21
- mb: "xs",
22
- role: "heading",
23
- "aria-level": "1"
24
- }, (0, _react2.jsx)(_index.Text, {
25
- fontSize: "xx",
26
- fontWeight: "3",
27
- fontColor: "text.primary",
28
- as: "h1"
29
- }, "Title of the Page"), (0, _react2.jsx)(_index.IconButton, {
30
- "aria-label": "icon button",
31
- ml: "sm",
32
- variant: "inverted"
33
- }, (0, _react2.jsx)(_index.Icon, {
34
- icon: _PlusIcon["default"],
35
- size: "sm",
36
- title: {
37
- name: 'Plus Icon'
38
- }
39
- }))), (0, _react2.jsx)(_index.Text, {
40
- fontSize: "sm",
41
- color: "text.secondary",
42
- fontWeight: "0",
43
- width: "800px"
44
- }, "The description of the page. The description of the page. The description of the page. The description of the page.The description of the page. The description of the page. The description of the page. The description of the page. The description of the page.\xA0", (0, _react2.jsx)(_index.Link, {
45
- href: "https://uilibrary.ping-eng.com/",
46
- sx: {
47
- fontSize: 'sm'
48
- }
49
- }, "Learn more")));
50
- };
51
- exports.Default = Default;
@@ -1,41 +0,0 @@
1
- import React from 'react';
2
- import PlusIcon from '@pingux/mdi-react/PlusIcon';
3
- import { Box, Icon, IconButton, Link, Text } from '../index';
4
- import { jsx as ___EmotionJSX } from "@emotion/react";
5
- export default {
6
- title: 'Recipes/Page Header'
7
- };
8
- export var Default = function Default() {
9
- return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
10
- align: "center",
11
- isRow: true,
12
- mb: "xs",
13
- role: "heading",
14
- "aria-level": "1"
15
- }, ___EmotionJSX(Text, {
16
- fontSize: "xx",
17
- fontWeight: "3",
18
- fontColor: "text.primary",
19
- as: "h1"
20
- }, "Title of the Page"), ___EmotionJSX(IconButton, {
21
- "aria-label": "icon button",
22
- ml: "sm",
23
- variant: "inverted"
24
- }, ___EmotionJSX(Icon, {
25
- icon: PlusIcon,
26
- size: "sm",
27
- title: {
28
- name: 'Plus Icon'
29
- }
30
- }))), ___EmotionJSX(Text, {
31
- fontSize: "sm",
32
- color: "text.secondary",
33
- fontWeight: "0",
34
- width: "800px"
35
- }, "The description of the page. The description of the page. The description of the page. The description of the page.The description of the page. The description of the page. The description of the page. The description of the page. The description of the page.\xA0", ___EmotionJSX(Link, {
36
- href: "https://uilibrary.ping-eng.com/",
37
- sx: {
38
- fontSize: 'sm'
39
- }
40
- }, "Learn more")));
41
- };